@media screen and (min-width: 1200px) {
  body,
  p,
  ul,
  ol,
  li,
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  em,
  a,
  span,
  strong,
  form,
  button,
  input,
  select,
  textarea,
  table,
  td,
  img,
  div,
  font,
  i,
  sup,
  table,
  header,
  footer,
  article,
  section {
    padding: 0;
    margin: 0;
    font: 14px 'sf-pro-text_regular', 'Montserrat', 'Microsoft Yahei';
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
  }

  html {
    width: 100%;
    font-size: inherit !important;
  }

  body {
    width: 100%;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: #f6f6f6;

    /* background-repeat: repeat;
    background-attachment: scroll;
    background-clip: border-box;
    background-origin: padding-box;
    background-position-x: 0;
    background-position-y: 0;
    background-size: auto auto;
    border-top: 1px solid transparent;
    禁止文字选中
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
     */
  }

  body::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #f1f1ef;
  }

  body::-webkit-scrollbar-track {
    background-color: #f1f1ef;
  }

  body::-webkit-scrollbar-thumb {
    background-color: var(--color-primary);
    background-color: var(--color-theme);
    border-radius: 10px;
  }

  img {
    border: 0;
    -webkit-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s;
  }

  ::-moz-selection {
    color: var(--color-white);
    background: #9c0;
  }

  ::selection {
    color: var(--color-white);
    background: #9c0;
  }

  ::-webkit-selection {
    color: var(--color-white);
    background: #9c0;
  }

  ::-moz-selection {
    color: var(--color-white);
    background: #9c0;
  }

  /* swiper轮播start */

  .swiper-container,
  .swiper-wrapper {
    width: 100%;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
  }

  .swiper-slide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 18px;
    text-align: center;
    -webkit-box-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
  }

  .swiper-button-next,
  .swiper-button-prev {
    opacity: 0;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
  }

  #js_banner:hover .swiper-button-next,
  #js_banner:hover .swiper-button-prev {
    opacity: 1;
  }

  /* swiper轮播end */

  /* 轩枫轮播start */

  .mod-banner {
    position: relative;
    z-index: 10;
    width: 100%;

    /* max-height: 300px; */
    margin-top: 10px;
    background: transparent;
    border-bottom: 1px solid var(--color-white);
  }

  .mod-banner__img {
    position: relative;
    display: block;
    width: 100%;
    height: 300px;
    max-width: 1200px;
    margin: 0 auto;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .mod-banner__img li {
    display: none;
    margin: 0 auto;
    text-align: center;
  }

  .mod-banner__img li img {
    width: 100%;
  }

  .mod-banner__img li.current {
    display: block;
  }

  .mod-banner__navi {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    height: 30px;
  }

  .mod-banner__navi .mod-banner_nav {
    height: 20px;
    max-width: 180px;
    margin: 5px auto 0;
    text-align: center;
  }

  .mod-banner__navi .mod-banner_nav a {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    background: var(--color-white);
    background: transparent;
    border: 2px solid var(--color-white);
    border-radius: 12px;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
  }

  .mod-banner__navi .mod-banner_nav a:hover {
    background: #39c;
    border: 2px solid #39c;
  }

  .mod-banner__navi .mod-banner_nav .mod-banner__current {
    width: 24px;
    background: #39c;
    border: solid 2px #39c;
  }

  .mod-banner__navi .mod-banner__nav-dot {
    position: absolute;
    top: 10px;
    right: 10%;
    width: 12px;
    height: 12px;
    overflow: hidden;
  }

  .mod-banner__tool span {
    position: absolute;
    top: 50%;
    display: block;
    width: 56px;
    height: 56px;
    margin-top: -35px;
    text-indent: -9999px !important;
    cursor: pointer;
    background-repeat: no-repeat;
    border-radius: 1px;
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
  }

  .mod-banner__tool > span {
    margin-top: 0;
    -webkit-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
  }

  .mod-banner__tool .mod-banner__tool-prev {
    top: 50%;
    left: 0;
    z-index: 2;
    width: 56px;
    height: 56px;
    margin-top: -25px;
    background-color: #27cfc3;
    background-image: url(../images/xfg.png);
    background-position: -328px -18px;
  }

  .mod-banner__tool .mod-banner__tool-prev .mod-banner__tool-white {
    width: 56px;
    height: 56px;
    background-image: url(../images/xfg.png);
    background-position: -268px -18px;
  }

  .mod-banner__tool .mod-banner__tool-prev:hover .mod-banner__tool-white {
    opacity: 1;
    filter: alpha(opacity=100);
  }

  .mod-banner__tool .mod-banner__tool-prev .mod-banner__tool-shadow {
    width: 56px;
    height: 10px;
    background-image: url(../images/xfg.png);
    background-position: -113px -132px;
  }

  .mod-banner__tool .mod-banner__tool-next {
    top: 50%;
    right: 0;
    z-index: 2;
    width: 56px;
    height: 56px;
    margin-top: -25px;
    background-color: #27cfc3;
    background-image: url(../images/xfg.png);
    background-position: -148px -18px;
  }

  .mod-banner__tool .mod-banner__tool-next .mod-banner__tool-white {
    width: 56px;
    height: 56px;
    background-image: url(../images/xfg.png);
    background-position: -208px -18px;
  }

  .mod-banner__tool .mod-banner__tool-next:hover .mod-banner__tool-white {
    opacity: 1;
    filter: alpha(opacity=100);
  }

  .mod-banner__tool .mod-banner__tool-next .mod-banner__tool-shadow {
    width: 56px;
    height: 10px;
    background-image: url(../images/xfg.png);
    background-position: -53px -132px;
  }

  .mod-banner__tool .mod-banner__tool-white {
    position: absolute;
    top: 35px;
    right: 0;
    opacity: 0;
    filter: alpha(opacity=0);
  }

  .mod-banner__tool .mod-banner__tool-shadow {
    position: absolute;
    top: 91px;
    right: 0;
    display: block;
    width: 56px;
    height: 10px;
  }

  /* 轩枫轮播end */

  @-webkit-keyframes leftIn {
    0%,
    60%,
    75%,
    90%,
    to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }

    60% {
      -webkit-transform: translateY(28px);
      transform: translateY(28px, 0, 0);
    }

    75% {
      -webkit-transform: translateY(3px);
      transform: translateY(3px, 0, 0);
    }

    90% {
      -webkit-transform: translateY(18px);
      transform: translateY(18px, 0, 0);
    }

    to {
      -webkit-transform: translateY(0px);
      transform: translateY(0px, 0, 0);
    }
  }

  @keyframes leftIn {
    0%,
    60%,
    75%,
    90%,
    to {
      -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }

    60% {
      -webkit-transform: translateY(28px);
      transform: translateY(28px, 0, 0);
    }

    75% {
      -webkit-transform: translateY(3px);
      transform: translateY(3px, 0, 0);
    }

    90% {
      -webkit-transform: translateY(18px);
      transform: translateY(18px, 0, 0);
    }

    to {
      -webkit-transform: translateY(0px);
      transform: translateY(0px, 0, 0);
    }
  }

  #js_banner {
    z-index: 10;
    width: 100%;
    height: 300px;
    margin: 0 auto;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  #js_banner #banner_img div {
    pointer-events: none;
  }

  #js_banner + .continar {
    margin-top: 10px;
  }

  #mobil {
    display: none !important;
  }

  #header {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 64px;
    margin-bottom: 15px;
    background: -webkit-gradient(linear, left top, left bottom, from(var(--color-white)), to(#eee));
    opacity: 1;

    /* background: var(--color-white); */

    /* background: -webkit-gradient(linear,left top,left bottom,from(var(--color-white)),to(#d4d7db));
    background: -moz-linear-gradient(top,var(--color-white),#d4d7db); */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    will-change: height;

    /* background: -moz-linear-gradient(top, var(--color-white), #eee);
    background: linear-gradient(var(--color-white), #eee); */
  }

  @keyframes speed_bar_animation {
    0% {
      width: 0%;
    }

    100% {
      width: 80%;
    }
  }

  @keyframes speed_bar_animation_complete {
    0% {
      width: 80%;
    }

    100% {
      width: 100%;
    }
  }

  header .speed_bar {
    width: 0%;
    height: 2px;
    overflow: hidden;
    background: url(../images/header_bj.gif);
    animation: speed_bar_animation 2s ease-in;
    animation-fill-mode: forwards;
  }

  .header-body {
    height: 100%;
    box-sizing: border-box;
  }

  .site-search.active {
    position: absolute;
    top: 74px;
    left: 0;
    display: none;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);

    /* transition: all 0.3s; */
  }

  .container {
    position: relative;
    max-width: 1200px;
    padding: 0;
    margin: 0 auto;
  }

  .site-search-form {
    padding: 25px 20%;
    overflow: hidden;
  }

  .search-input {
    float: left;
    width: 93%;
    height: 40px;
    padding: 5px 12px;
    margin: 15px 0;
    line-height: 40px;
    color: #606266;
    border: 1px solid #dcdfe6;
    border-right: none;
    border-radius: 4px 0 0 4px;
    outline: 0;
  }

  .search-btn .iconfont {
    width: 16px;
    font-size: 16px;
    color: var(--color-white);
  }

  .fa-search:before {
    content: '\f002';
  }

  .search-btn {
    width: 7%;
    height: 40px;
    margin: 15px 0;
    line-height: 40px;
    cursor: pointer;
    background: var(--color-primary);
    background: var(--color-theme);
    border: none;
    border-radius: 0 4px 4px 0;
  }

  #header.hover {
    z-index: 1000;
    z-index: 100 !important;
    height: 48px;
    opacity: 1;
  }

  #header.hover .site-search.active {
    top: 50px;
  }

  .header-conter {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
  }

  .topbar {
    width: 100%;
    height: 100%;
  }

  .header-list {
    width: 1200px;
    height: 28px;
    margin: 0 auto;
    line-height: 28px;
    color: var(--color-white);
  }

  .topbar ul {
    float: right;
    width: 362px;
    height: 100%;
    overflow: hidden;
    font-size: 0;
    text-align: right;
  }

  .topbar ul li {
    display: inline-block;
    padding: 0 12px;
    color: var(--color-white);
    -webkit-transition: all 0.35s;
    -o-transition: all 0.35s;
    transition: all 0.35s;
  }

  .topbar ul.last-ul li:not(.github):hover {
    background: #de4c5f;
  }

  .topbar ul li.github {
    width: 40px;
    height: 100%;
    padding: 0;
  }

  .topbar ul li.github a {
    width: 100%;
    height: 28px;
    text-align: center;
  }

  .topbar ul li.github a i.iconfont {
    display: block;
    margin-top: -2px;
    font-size: 18px;
    line-height: 28px;
    color: var(--color-white);
  }

  .topbar ul li a {
    display: block;
    height: 100%;
    font-size: 12px;
    line-height: 28px;
    color: var(--color-white);
    -webkit-transition: all 0.35s;
    -o-transition: all 0.35s;
    transition: all 0.35s;
  }

  .topbar ul li font {
    color: var(--color-white);
  }

  #username a font font {
    color: var(--color-white);
  }

  .topbar ul.last-ul li:nth-child(1) {
    margin-right: 20px;
  }

  .topbar ul.last-ul li:nth-child(2) {
    padding: 0 10px;
    background-color: #de4c5f;
  }

  #username {
    float: left;
  }

  #username a {
    display: none;
    float: left;
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
    line-height: 28px;
    color: var(--color-white);
    -webkit-transition: all 0.35s;
    -o-transition: all 0.35s;
    transition: all 0.35s;
  }

  #username a i {
    padding: 0 3px;
    font-size: 14px;
    color: var(--color-white);
  }

  #header .nav ul li a span i:nth-of-type(1) {
    margin-right: 3px;
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
  }

  .nav {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
  }

  .brand {
    position: relative;
    float: left;
    float: left\9;
    max-width: 185px;
    margin: 16px 0 0 15px;
    -webkit-transition: all 0.25s;
    -o-transition: all 0.25s;
    transition: all 0.25s;
  }

  #header.hover .brand {
    margin-top: 7px;
  }

  .brand::before {
    position: absolute;
    top: 1px;
    left: 0;
    height: 30px;
    border-left: 1px solid #bbb;
    content: '';
    -webkit-transition: all 0.25s;
    -o-transition: all 0.25s;
    transition: all 0.25s;
  }

  .brand p {
    width: 100%;
    padding-left: 15px;
    overflow: hidden;
    font-size: 14px;
    line-height: 16px;
    color: var(--color-gray_dark);
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-transition: all 0.6s;
    transition: all 0.6s;
  }

  .brand p:hover {
    color: var(--color-gray);
  }

  .nav ul .sub-menu {
    position: absolute;
    perspective: 400px;
  }

  .nav ul .sub-menu li {
    float: none;
    padding: 0;
    overflow: hidden;
    pointer-events: none;
    background: #d4d7db;
    opacity: 0;
    transform: rotateY(90deg);
    transition: opacity 0.3s, transform 0.4s;
  }

  .nav ul li.active .sub-menu li {
    pointer-events: auto;
  }

  #header.hover .nav ul .sub-menu li {
    padding: 0;
  }

  .nav ul .sub-menu li:last-of-type a {
    border: 0;
  }

  .nav ul.music-nav {
    display: flex;
    float: right;
    height: 100%;
    max-width: calc(100% - 430px);
    margin-right: 75px;
    justify-content: space-between;
  }

  .nav ul.music-nav > li > a {
    font-size: 16px;
  }

  .nav ul li {
    /* perspective:100px;
  -ms-perspective:100px;  */
    position: relative;
    float: left;
    height: 100%;
    padding: 15px 0px;
    line-height: 32px;
    -webkit-transition: all 0.25s;
    -o-transition: all 0.25s;
    transition: all 0.25s;
  }

  #header.hover .nav ul li {
    padding: 7px 0;
  }

  .nav ul li.front a,
  .nav ul li.works a {
    cursor: default;
  }

  .nav ul li img {
    position: absolute;
    top: -8px;
    right: 0;
  }

  .nav ul li > a {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    height: 32px;
    padding: 0 10px;
    line-height: 32px;
    text-decoration: none;
    transition: transform 0.5s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transform-style: flat\9;
    -webkit-transform-origin: center center -14px;
    -ms-transform-origin: center center -14px;
    transform-origin: center center -14px;
  }

  .nav ul li audio {
    display: none;
  }

  .nav ul li a span {
    display: block;
    width: 100%;
    height: 32px;
    overflow: hidden;
    font-size: 16px;
    line-height: 32px;
    color: var(--color-gray);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }

  .nav ul.music-nav li:nth-child(1):after {
    background: var(--color-red_shallow);
  }

  .nav ul.music-nav li:nth-child(2):after {
    background: var(--color-yellow_shallow);
  }

  .nav ul.music-nav li:nth-child(3):after {
    background: var(--color-golden);
  }

  .nav ul.music-nav li:nth-child(4):after {
    background: var(--color-silver_yellow);
  }

  .nav ul.music-nav li:nth-child(5):after {
    background: var(--color-violetred);
  }

  .nav ul.music-nav li:nth-child(6):after {
    background: var(--color-blue);
  }

  .nav ul.music-nav li:nth-child(7):after {
    background: var(--color-purple);
  }

  .nav ul li > p {
    position: absolute;
    bottom: -0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--color-primary);
    background: var(--color-theme);
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
  }

  .nav ul.music-nav > li:not(.mod-header_music-icon):after {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 3px;
    pointer-events: none;
    content: '';
    transition: height 0.2s ease-in-out;
  }

  .nav ul.music-nav li:hover:not(.mod-header_music-icon):after,
  .nav ul.music-nav li.active:after {
    height: 65px;
    border-radius: 0;
  }

  #header.hover .nav ul.music-nav li:hover:not(.mod-header_music-icon):after,
  #header.hover .nav ul.music-nav li.active:after {
    height: 48px;
  }

  #header .nav ul li.keyboard_color > a span,
  #header .nav ul li.keyboard_color > a span i {
    color: var(--color-white);
  }

  .nav ul li.off:hover a span {
    color: var(--color-primary);
    color: var(--color-theme);
  }

  .nav ul.music-nav li:hover a {
    margin-top: 2px;
    margin-top: 0px\9;
    -webkit-transform: rotateX(-89.99deg);
    -ms-transform: rotateX(-89.99deg);
    transform: rotateX(-89.99deg);
    transform: rotateX(0deg) \9;
  }

  .nav ul li a span:nth-of-type(2) {
    position: absolute;
    top: -22px;
    left: 0px;
    -webkit-transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    transform: rotateX(90deg);
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
  }

  .nav ul li.action > a span,
  .nav li.current-menu-item a i,
  #nav_list li.current-category-ancestor > a span,
  #nav_list ul li.current-category-ancestor .iconfont,
  #nav_list li.current-menu-ancestorm > a span,
  #header li.current-menu-parent > a span,
  #nav_list li.current-menu-parent > a span i,
  #nav_list li.current-category-parentt > a span,
  #nav_list li.current-menu-item a {
    color: var(--color-primary);
    color: var(--color-theme);
  }

  .nav ul.music-nav li {
    z-index: 13;
    cursor: pointer;
  }

  .nav ul#nav_list li:hover a span {
    /* -webkit-transition: all 0.35s;
    -o-transition: all 0.35s;
    transition: all 0.35s; */
    color: var(--color-white);
  }

  .nav ul#nav_list li:hover a span i {
    display: inline-block;
    line-height: 30px;
    color: var(--color-white);
  }

  .nav ul li:hover a span i.menu_arrow {
    -webkit-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    transform: rotateX(180deg);
    transform: rotateX(180deg);
    -webkit-transition: transform 0.5s;
    -o-transition: transform 0.5s;
    transition: transform 0.5s;
  }

  .nav .nav-min {
    position: absolute;
    top: 63px;
    left: 0;
    z-index: 13;
    width: 100%;
    height: auto;
    max-height: 0;
  }

  .nav ul.music-nav li:hover .sub-menu li,
  .nav ul.music-nav li:focus .sub-menu li {
    opacity: 1;
    transform: none;
  }

  .nav .nav-min a.action {
    color: var(--color-primary);
    color: var(--color-theme);
  }

  /* .nav .nav-min::before {
    content: '';
    height: 0;
    width: 0;
    border: 7px solid transparent;
    position: absolute;
    top: -16px;
    left: 30px;
    border-bottom-color: var(--color-primary);
  } */

  /* 跳动的音符start */

  .mod-header_music-icon {
    position: absolute !important;
    top: 15px;
    right: 35px;
    width: 30px;
    height: 30px !important;
    cursor: pointer;
  }

  #header.hover .mod-header_music-icon {
    top: 7px;
  }

  #header.hover .navto-search {
    top: 12px;
  }

  .mod-header_music-icon i:nth-of-type(1) {
    left: 0;
    display: none;
  }

  .mod-header_music-icon i {
    position: absolute;
    bottom: 8px;
    width: 2px;
    height: 15px;
    background-color: #fff;
    box-shadow: 0 0 10px rgb(0 0 0 / 40%);
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
  }

  i {
    font-style: normal;
  }

  .mod-header_music-icon i:nth-of-type(2) {
    left: 6px;
    -webkit-transform: rotate(22.5deg);
    -ms-transform: rotate(22.5deg);
    transform: rotate(22.5deg);
  }

  .mod-header_music-icon i:nth-of-type(3) {
    left: 12px;
    -webkit-transform: rotate(-22.5deg);
    -ms-transform: rotate(-22.5deg);
    transform: rotate(-22.5deg);
  }

  .mod-header_music-icon i:nth-of-type(4) {
    left: 18px;
    -webkit-transform: rotate(22.5deg);
    -ms-transform: rotate(22.5deg);
    transform: rotate(22.5deg);
  }

  .mod-header_music-icon i:nth-of-type(5) {
    left: 24px;
    -webkit-transform: rotate(-22.5deg);
    -ms-transform: rotate(-22.5deg);
    transform: rotate(-22.5deg);
  }

  .mod-header_music-icon.hover:not(.close) i:nth-of-type(1) {
    -webkit-animation: piano_wave 0.66s linear infinite;
    animation: piano_wave 0.66s linear infinite;
  }

  .mod-header_music-icon.hover:not(.close) i {
    background-color: var(--color-dark);
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  .mod-header_music-icon.hover:not(.close) i:nth-of-type(2) {
    -webkit-animation: piano_wave 0.8s linear infinite;
    animation: piano_wave 0.8s linear infinite;
  }

  .mod-header_music-icon.hover:not(.close) i:nth-of-type(3) {
    -webkit-animation: piano_wave 0.7s linear infinite;
    animation: piano_wave 0.7s linear infinite;
  }

  .mod-header_music-icon.hover:not(.close) i:nth-of-type(4) {
    -webkit-animation: piano_wave 0.5s linear infinite;
    animation: piano_wave 0.5s linear infinite;
  }

  .mod-header_music-icon.hover:not(.close) i:nth-of-type(5) {
    -webkit-animation: piano_wave 0.9s linear infinite;
    animation: piano_wave 0.9s linear infinite;
  }

  @-webkit-keyframes piano_wave {
    0% {
      height: 4px;
    }

    50% {
      height: 18px;
    }

    to {
      height: 10px;
    }
  }

  @keyframes piano_wave {
    0% {
      height: 4px;
    }

    50% {
      height: 18px;
    }

    to {
      height: 10px;
    }
  }

  /* 跳动的音符end */

  #header.hover .nav .nav-min {
    top: 47px;
  }

  #header .nav-min a {
    display: block;
    height: 40px;
    margin-top: 0 !important;
    font-size: 13px;
    line-height: 40px;
    color: #444;
    text-align: center;
    border-bottom: 1px solid var(--color-gray_shallow);
    transform: rotateX(0deg) !important;
  }

  #header .nav-min > a:last-child {
    border: 0;
  }

  #header .nav-min a:hover {
    color: var(--color-theme);
    background: #ddd;
    -webkit-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
  }

  .nav ul li span a i {
    display: inline-block;
    margin-left: 3px;
  }

  .navto-search {
    position: absolute;
    top: 19px;
    right: 0px;
    transition: top 0.25s;
  }

  .navto-search a {
    display: block;
    padding: 2px 0px 1px 0px;
    color: var(--color-gray);
  }

  .navto-search .icon-guanbi {
    font-weight: bold;
  }

  @keyframes Top {
    0% {
      -webkit-transform: translateY(-108px);
      transform: translateY(-108px);
    }

    80% {
      -webkit-transform: translateY(30px);
      transform: translateY(30px);
    }

    100% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }
  }

  @-webkit-keyframes Top {
    0% {
      -webkit-transform: translateY(-108px);
    }

    80% {
      -webkit-transform: translateY(30px);
    }

    100% {
      -webkit-transform: translateY(0);
    }
  }

  @keyframes move {
    0% {
      -webkit-transform: translateY(0);
      transform: translateY(0);
    }

    100% {
      -webkit-transform: translateY(-8px);
      transform: translateY(-8px);
    }
  }

  @-webkit-keyframes move {
    0% {
      -webkit-transform: translateY(0);
    }

    100% {
      -webkit-transform: translateY(-8px);
    }
  }

  @keyframes playLeft {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-890px);
      transform: translateX(-890px);
    }

    50% {
      opacity: 1;
    }

    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }

  @-webkit-keyframes playLeft {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-890px);
    }

    50% {
      opacity: 1;
    }

    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
    }
  }

  @keyframes playRight {
    0% {
      opacity: 0;
      -webkit-transform: translateX(435px);
      transform: translateX(435px);
    }

    50% {
      opacity: 1;
    }

    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }

  @-webkit-keyframes playRight {
    0% {
      opacity: 0;
      -webkit-transform: translateX(435px);
    }

    50% {
      opacity: 1;
    }

    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
    }
  }

  @-webkit-keyframes Footer {
    0% {
      opacity: 0;
      -webkit-transform: translateY(125px);
    }

    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
    }
  }

  @keyframes Footer {
    0% {
      opacity: 0;
      -webkit-transform: translateY(125px);
    }

    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
    }
  }

  @-webkit-keyframes bar {
    0% {
      -webkit-transform: translateY(-12px);
    }

    100% {
      -webkit-transform: translateY(0);
    }
  }

  @keyframes bar {
    0% {
      -webkit-transform: translateY(-12px);
    }

    100% {
      -webkit-transform: translateY(0);
    }
  }

  @-webkit-keyframes bar1 {
    0% {
      -webkit-transform: rotate(0);
    }

    100% {
      -webkit-transform: rotate(-360deg);
    }
  }

  @keyframes bar1 {
    0% {
      -webkit-transform: rotate(0);
    }

    100% {
      -webkit-transform: rotate(-360deg);
    }
  }

  #Logo {
    display: flex;
    float: left;
    width: 135px;
    height: 100%;
    overflow: hidden;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    align-items: center;

    /* 垂直居中 */
  }

  #Logo > img {
    width: 100%;
    -webkit-transition: all 0.25s;
    -o-transition: all 0.25s;
    transition: all 0.25s;
  }

  @-webkit-keyframes searchLights {
    0% {
      top: 0;
      left: -100px;
    }

    to {
      top: 100px;
      left: 120px;
    }
  }

  @keyframes searchLights {
    0% {
      top: 0;
      left: -100px;
    }

    to {
      top: 100px;
      left: 120px;
    }
  }

  .nav span.logo {
    display: block;
    float: left;
    width: 45px;
    height: 100%;
    overflow: hidden;
    background: url('../images/xfg.png') no-repeat 10px 1px;
    background-position: -10px -2px;
    background-size: 350px 175px;
  }

  #aircraft {
    position: fixed;
    right: 25px;
    bottom: 60px;
    z-index: 1000;
    display: none;
    width: 38px;
    height: 64px;
    font-size: 40px;
  }

  #aircraft font {
    font-size: 40px;
    line-height: 64px;
    color: var(--color-primary);
    color: var(--color-theme);
    text-align: center;
  }

  #aircraft:hover {
    cursor: pointer;
  }

  /* 主题内容区域start */
  .continar {
    width: 1200px;
    min-height: calc(100% - 247px);
    margin: 0 auto 25px;
    overflow: hidden;
  }

  .continar .search_404 {
    position: fixed;
    top: 50%;
    left: 50%;
    display: none;
    max-width: 650px;
    transform: translate(-50%, -50%);
  }

  .continar #continar-left {
    float: left;
    width: 850px;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  .continar .single {
    padding: 0 15px 15px;
    background: var(--color-white);
    border-radius: 4px;
  }

  .single video {
    display: block;
    height: 320px;
    max-width: 100%;
    min-width: 50%;
    margin: 0 auto;
  }

  .continar .continar-left-top {
    width: 100%;
    padding: 15px 20px;
    overflow: hidden;
    background-color: var(--color-white);
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    box-sizing: border-box;
    -webkit-transition: all 0.35s;
    -o-transition: all 0.35s;
    transition: all 0.35s;
  }

  .continar .continar-left-top:empty {
    display: none;
  }

  .continar .continar-left-top h1 {
    margin: 0 0 15px;
    margin-top: 0;
    font-size: 18px;
    line-height: 24px;
    -webkit-transition: all 0.35s;
    -o-transition: all 0.35s;
    transition: all 0.35s;
    -webkit-box-reflect: below -3px -webkit-gradient(
      linear,
      left top,
      left bottom,
      from(transparent),
      color-stop(10%, transparent),
      to(hsla(0, 0%, 100%, 0.2))
    );
  }

  .continar .continar-left-top h1 a {
    font-size: 18px;
    color: var(--color-primary);
    color: var(--color-theme);
  }

  .continar .continar-left-top h1 a:hover {
    color: var(--color-primary);
    color: var(--color-theme);
  }

  .continar .continar-left-top h1 a img {
    height: auto;
    max-width: 100%;
    vertical-align: baseline;
    border: 0;
  }

  .continar .continar-left-top h1 span {
    margin-left: -8px;
    font-size: 20px;
    color: var(--color-primary);
    color: var(--color-theme);
    -webkit-transition: all 0.25s;
    -o-transition: all 0.25s;
    transition: all 0.25s;
  }

  .continar .continar-left-top p {
    display: -webkit-box;
    width: 100%;
    margin: 0;
    overflow: hidden;
    line-height: 25px;
    color: var(--color-gray);
    text-indent: 2em;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    -webkit-line-clamp: 2;
    -moz-line-clamp: 2;
  }

  .continar .continar-left-top > span {
    display: block;
    display: -webkit-box;
    height: 50px;
    overflow: hidden;
    overflow: hidden;
    font-size: 14px;
    line-height: 25px;
    color: var(--color-gray);
    text-indent: 2em;
    text-overflow: -o-ellipsis-lastline;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .continar .inner-box {
    padding: 15px 20px;
    margin-bottom: 10px;
    background: var(--color-white);
    border-top: 1px solid #eaeaea;
    border-bottom: 0;
    border-radius: 0 0 4px 4px;
    -webkit-transition: all 0.35s;
    -o-transition: all 0.35s;
    transition: all 0.35s;
  }

  .continar .rssbook {
    text-align: center;
  }

  .continar .rssbook p {
    font-size: 12px;
    color: #777;
    vertical-align: top;
  }

  .continar .rssbook > p {
    margin: 10px auto;
  }

  .continar .rssbook > p:empty {
    display: none;
  }

  .continar p.wpm_thankyou {
    color: #ed145b;
  }

  .rssbook h3 {
    font-size: 16px;
  }

  .rssbook p {
    margin: 0 auto;
    font-size: 12px;
    line-height: 24px;
  }

  .rssbook form {
    display: block;
    margin: 0 auto 1px;
  }

  .wpm_form .wpm_email,
  .wpm_form .wpm_submit {
    display: inline-block;
  }

  .wpm_form .wpm_email input {
    float: left;
    width: 215px;
    height: 34px;
    padding: 10px;
    background: var(--color-white);
    border: 1px solid #d9d9d9;
    border-right: 0;
    border-radius: 3px 0 0 3px;
    outline: 0;
  }

  .wpm_form .wpm_submit input {
    height: 34px;
    padding: 7px 15px 8px;
    color: var(--color-white);
    cursor: pointer;
    background: var(--color-primary);
    background: var(--color-theme);
    border: none;
    border-radius: 0 3px 3px 0;
  }

  .wpm_form .wpm_email input:focus {
    border-color: #40a9ff;
    border-right-width: 1px !important;
    outline: 0;
  }

  .wpm_form .wpm_email input::-webkit-input-placeholder {
    color: #bfbfbf;
  }

  .wpm_form .wpm_email input::-moz-input-placeholder {
    color: #bfbfbf;
  }

  .wpm_form .wpm_email input::-ms-input-placeholder {
    color: #bfbfbf;
  }

  #continar-left .article_list article {
    position: relative;
    position: relative;
    height: 173px;
    padding: 15px;
    margin-bottom: 10px;
    background: var(--color-white);
    border-bottom: 1px solid transparent;
    border-radius: 4px;
    -webkit-transform: translate3d(0, 0px, 0);
    transform: translate3d(0, 0px, 0);
    -webkit-transition: all 0.35s;
    -o-transition: all 0.35s;
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.35s;
    transition: all 0.2s linear;
  }

  #continar-left .article_list article:last-of-type {
    margin-bottom: 0;
  }

  .article_list article .mod-category__article-time {
    position: absolute;
    top: 25px;
    left: 25px;
    z-index: 10;
    width: 67px;
    height: 58px;
    background: rgba(0, 0, 0, 0.3);
  }

  .article_list article .mod-category__article-time span {
    display: inline-block;
    width: 100%;
    font-size: 10px;
    line-height: 22px;
    color: var(--color-white);
    text-align: center;
  }

  .article_list article .mod-category__article-time span:nth-of-type(1) {
    padding: 5px 0 8px;
    font-size: 20px;
  }

  .article_list article .mod-category__article-time:after {
    position: absolute;
    top: 32px;
    left: 9px;
    width: 48px;
    border-bottom: 2px solid var(--color-white);
    content: '';
  }

  #continar-left .article_list article:after {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1px;
    background: var(--color-primary);
    background: var(--color-theme);
    content: '';
    transform: translate(-50%, -50%);
    -webkit-transition: 0.4s;
    transition: 0.4s;
  }

  #continar-left .article_list article:hover,
  #continar-left .article_list article:hover:after {
    width: 100%;
  }

  .article_list article img {
    float: left;
    width: 220px;
    max-width: 100%;
    border: 0;
    border-radius: 4px;
    -moz-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
  }

  .article_list article .img-left img:hover {
    -webkit-transform: scale(1.1) translate(-45%, -45%);
    -ms-transform: scale(1.1) translate(-45%, -45%);
    transform: scale(1.1) translate(-45%, -45%);
  }

  .article_list article .text_right {
    float: right;
    width: calc(100% - 235px);
  }

  .text_right h2 span:nth-child(1) {
    position: relative;
    top: -4px;
    display: inline-block;
    padding: 0px 6px 3px;
    margin-right: 8px;
    font-size: 12px;
    color: var(--color-white);
    background: var(--color-primary);
    background: var(--color-theme);
    border-radius: 2px;
  }

  .text_right h2 span:nth-child(1) i {
    position: absolute;
    top: 50%;
    right: -7px;
    display: inline-block;
    width: 0;
    height: 0;
    margin-top: -6px;
    vertical-align: middle;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid var(--color-primary);
    border-left: 10px solid var(--color-theme);
  }

  .text_right h2 span:nth-child(1) a {
    font-size: 12px;
    color: var(--color-white);
  }

  .article_list article h2.topping {
    width: calc(100% - 30px);
  }

  .article_list article h2 {
    padding-top: 2px;
    margin-bottom: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .article_list article h2 a {
    font-size: 18px;
    color: var(--color-dark);
    -webkit-transition: all 0.35s;
    -o-transition: all 0.35s;
    transition: all 0.35s;
  }

  .article_list article h2 a:hover {
    color: var(--color-primary);
    color: var(--color-theme);
  }

  .con_info {
    padding: 10px 15px;
    background: #f6f6f6;
    border-radius: 4px;
  }

  .article_list article em {
    position: absolute;
    top: 20px;
    right: 15px;
    display: block;
    font-style: normal;
    color: var(--color-white);
    background: var(--color-primary);
    background: var(--color-theme);
    border-radius: 2px;
    opacity: 0.8;
    -webkit-transition: all 0.35s;
    -o-transition: all 0.35s;
    transition: all 0.35s;
  }

  .article_list article em a {
    display: block;
    height: 100%;
    padding: 0px 7px;
    font-size: 12px;
    color: var(--color-white);
    text-align: center;
  }

  .article_list article em:hover a {
    background: #5e5e5e;
    -webkit-transition: all 0.35s;
    -o-transition: all 0.35s;
    transition: all 0.35s;
  }

  .article_list article em:hover:after {
    border-left: 8px solid #5e5e5e;
    -webkit-transition: all 0.35s;
    -o-transition: all 0.35s;
    transition: all 0.35s;
  }

  .article_list article em:after {
    position: absolute;
    top: 8px;
    left: 50%;
    z-index: -1;
    margin-left: -2px;
    border: 8px dashed transparent;
    border-left: 8px solid var(--color-primary);
    border-left: 8px solid var(--color-theme);
    border-right-width: 0;
    content: '';
  }

  .article_list article h2 + img {
    display: none !important;
  }

  .space,
  .sep,
  .space {
    padding: 0 10px;
    font-style: normal;
  }

  .article_list article h3 {
    display: -webkit-box;
    width: 100%;
    height: 48px;
    margin-top: 16px;
    overflow: hidden;
    line-height: 24px;
    -webkit-box-orient: vertical;
    box-orient: vertical;
    -webkit-line-clamp: 2;
    -moz-line-clamp: 2;
  }

  .read-more {
    position: absolute;
    right: 0;
    bottom: 11px;
    padding: 0 12px;
    font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'PingFang SC', 'Hiragino Sans GB',
      'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
    font-size: 12px;
    line-height: 24px;
    color: #777;
    text-align: center;
    -webkit-transition: all 0.25s;
    -o-transition: all 0.25s;
    transition: all 0.25s;
  }

  .text_right .read_url {
    right: 15px;
    padding: 0;
  }

  .img-left {
    position: relative;
    float: left;
    width: 220px;
    height: 140px;
    overflow: hidden;
    border: 0;
    border-radius: 2px;
  }

  .img-left .read-more {
    position: absolute;
    top: 0;
    bottom: auto;
    width: 100%;
    height: 100%;
    padding: 0;
  }

  .img-left .read-more img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
  }

  .read-more i {
    padding-left: 3px;
    font-size: 12px;
    color: var(--color-gray_dark);
  }

  .read-more:hover,
  .read-more:hover i {
    color: var(--color-gray);
  }

  .read-more a {
    position: relative;
  }

  #continar-right {
    float: right;
    width: 340px;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  #continar-right .aside {
    padding: 0 15px 10px 15px;
    margin-bottom: 10px;
    background: var(--color-white);
    border-bottom: 0;
    border-radius: 4px;
    -webkit-transition: all 0.35s;
    -o-transition: all 0.35s;
    transition: all 0.35s;
  }

  #continar-right .aside h3 {
    display: inline-block;
    padding: 4px 15px;
    margin: -1px 0 0 0;
    font-size: 15px;
    font-size: 14px;
    color: var(--color-white);
    background: var(--color-primary);
    background: var(--color-theme);
  }

  #continar-right .aside .textwidget a {
    font: inherit;
  }

  #continar-right .aside .textwidget a svg {
    vertical-align: text-bottom;
  }

  #continar-right p.clearfix {
    margin: 10px 0 0;
    line-height: 24px;
    text-align: justify;
    text-align-last: left;
  }

  #continar-right p.clearfix a {
    color: var(--color-primary);
    color: var(--color-theme);
    -webkit-transition: all 0.25s;
    -o-transition: all 0.25s;
    transition: all 0.25s;
  }

  #continar-right p.clearfix a:hover {
    color: var(--color-primary);
    color: var(--color-theme);
  }

  .widget {
    margin-bottom: 10px;
    background: var(--color-white);
    border-bottom: 0;
    border-radius: 4px;
    -webkit-transition: all 0.35s;
    -o-transition: all 0.35s;
    transition: all 0.35s;
  }

  .Label .daily-list {
    padding: 5px 10px 10px 10px;
  }

  .Label .daily-list > a {
    padding: 5px 9px;
  }

  .daily-list {
    margin-bottom: 10px;
    font-size: 15px;
    color: var(--color-gray);
  }

  .daily-list > p {
    padding: 0px 15px 8px 15px;
    line-height: 27px;
    text-align: justify;
    text-align-last: left;
  }

  .daily-list > p:last-child {
    padding-left: 15px;
  }

  .daily-list > p a {
    color: var(--color-primary);
    color: var(--color-theme);
  }

  .widget-title {
    position: relative;
    margin-bottom: 8px;
    border-bottom: 1px solid #f1f1ef;
  }

  .widget-title:after {
    bottom: -1px;
    left: 0;
    display: block;
    width: 100px;
    height: 2px;
    background: var(--color-primary);
    background: var(--color-theme);
    content: '';
  }

  .widget-title a {
    position: relative;
    font-size: 15px;
    line-height: 40px;
    color: #5e5e5e;
    cursor: default;
  }

  .widget-title a:hover {
    text-decoration: none;
  }

  .daily-list ul {
    padding: 2px 15px;
    overflow: hidden;
  }

  .widget-title a i {
    float: left;
    height: 40px;
    padding: 0 5px 0 14px;
    font-size: 18px;
    line-height: 40px;
    text-indent: 0;
    border-radius: 2px 0 0;
  }

  .widget ul li {
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: 4px;
    line-height: 30px;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
  }

  .widget ul li:last-of-type {
    border-bottom: none;
  }

  .daily-title {
    position: relative;
    display: block;
    padding-left: 12px;
    font-size: 12px;
    line-height: 18px;
  }

  .daily-title:before {
    position: absolute;
    top: 4px;
    left: -3px;
    display: block;
    width: 4px;
    height: 4px;
    border: 2px solid var(--color-gray_light);
    border-radius: 100%;
    content: '';
  }

  .daily-desc {
    height: 45px;
    padding: 5px 0 0 10px;
    margin-bottom: 10px;
    overflow: hidden;
    font-size: 14px;
    line-height: 18px;
    border-left: 2px solid var(--color-gray_light);
  }

  .widget ul li:hover h3,
  .widget ul li:hover span {
    color: var(--color-primary);
    color: var(--color-theme);
    -webkit-transition: all 0.35s;
    -o-transition: all 0.35s;
    transition: all 0.35s;
  }

  .widget ul li:hover span.daily-title:before {
    background: var(--color-primary);
    background: var(--color-theme);
    border: 2px solid var(--color-primary);
    border: 2px solid var(--color-theme);
    -webkit-transition: all 0.35s;
    -o-transition: all 0.35s;
    transition: all 0.35s;
  }

  div.com-art ul li {
    width: 95%;
    height: 30px;
    overflow: hidden;
    font-size: 13px;
    line-height: 30px;
  }

  #piano ul li i.icon-jiantou {
    position: absolute;
    top: 5px;
    left: 0;
    display: inline-block;
    font-size: 18px;
    color: #808695;
    text-align: center;
    transform: rotate(270deg);
  }

  /* .widget ul li em {
    background: var(--color-gray_light);
    color: var(--color-white);
    border-radius: 3px;
    line-height: 18px;
    width: 20px;
    height: 20px;
    font-style: italic;
    display: inline-block;
    position: absolute;
    top: 5px;
    left: 0;
    text-align: center;
    font-size: 15px;
    font-family: 'georgia', 'STHeiti', 'Microsoft YaHei', 'simsun', 'sans-serif', Arial;
  } */

  .widget ul li a {
    position: relative;
    display: block;
    height: 30px;
    margin-left: 20px;
    overflow: hidden;
    line-height: 30px;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .widget ul li a span {
    height: 30px;
    line-height: 30px;
  }

  #piano ul li {
    float: none;
    margin: 8px 0;
  }

  #piano ul li:first-of-type {
    margin-top: 0;
  }

  .classif {
    position: relative;
    margin-bottom: 10px;
    overflow: hidden;
    clear: both;
    background-color: var(--color-white);
    border-bottom: 0;
    border-radius: 4px;
    -webkit-transition: all 0.35s;
    -o-transition: all 0.35s;
    transition: all 0.35s;
  }

  .items {
    padding: 5px 15px 12px 15px;
    overflow: hidden;
  }

  .items a {
    height: 29px;
    padding: 0 8px;
    overflow: hidden;
    font-size: 12px !important;
    line-height: 29px;
    color: var(--color-gray_dark);
    background-color: #f6f6f6;
    -webkit-transition: all 0.35s;
    -o-transition: all 0.35s;
    transition: all 0.35s;
  }

  .items a:hover {
    color: var(--color-white);
    background: var(--color-primary);
    background: var(--color-theme);
  }

  .pagination {
    display: block;
    padding: 20px;
    margin-bottom: 20px;
    font-size: 12px;
    text-align: center;
  }

  .pagination ul {
    display: inline-block;
    padding: 0;
    margin-bottom: 0;
    margin-left: 0;
  }

  .pagination ul > li {
    display: inline;
    font-size: 12px;
  }

  .pagination ul > li > a {
    float: left;
    padding: 5px 12px;
    margin: 0 2px;
    color: var(--color-gray);
    background-color: #ddd;
    border-radius: 2px;
    opacity: 0.88;
  }

  .pagination ul > li > span {
    float: left;
    padding: 5px 12px;
    margin: 0 2px;
    color: var(--color-gray);
    background-color: #ddd;
    border-radius: 2px;
    opacity: 0.88;
  }

  .pagination ul > li.active span {
    color: var(--color-white);
    background-color: #61b3e6;
  }

  .footer {
    position: relative;
    z-index: 10;
    width: 100%;
    padding: 20px 0;
    clear: both;
    font-size: 12px;
    line-height: 12px;
    text-align: center;
    background: url(../images/footer_bg.jpg) center center repeat-x;

    /* 避免因为轮播动画导致页面闪烁，详情参考：https://www.weipxiu.com/8506.html */
    backface-visibility: hidden;
    transform-style: preserve-3d;
  }

  .footer a {
    font-size: 12px;
    text-decoration: underline;
    -webkit-transition: 0.35s;
    -o-transition: 0.35s;
    transition: 0.35s;
  }

  .footer a:hover {
    color: var(--color-primary) !important;
    color: var(--color-theme) !important;
    text-decoration: underline;
  }

  .footer span {
    font-size: 12px;
  }

  .footer p {
    margin-bottom: 15px;
    font-size: 12px;
  }

  .container {
    position: relative;
    max-width: 1200px;
    padding: 0;
    margin: 0 auto;
  }

  .container a {
    font-size: 12px;
    color: #9b9ea0;
    -webkit-transition: 0.35s;
    -o-transition: 0.35s;
    transition: 0.35s;
  }

  .container a:hover,
  .container p a.highlight {
    color: var(--color-primary) !important;
    color: var(--color-theme) !important;
    text-decoration: underline;
  }

  .container p {
    margin-bottom: 15px;
    font-size: 12px;
    color: #9b9ea0;
  }

  .container p a:hover {
    text-decoration: underline;
  }

  .container p span {
    font-size: 12px;
  }

  .container p:nth-child(1) {
    color: var(--color-gray_dark);
  }

  .buffer {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    overflow: hidden;
    color: var(--color-white);
    background: -webkit-gradient(linear, left top, left bottom, from(#4ad0f7), to(#4bd391));
    background: -webkit-linear-gradient(top, #4ad0f7 0%, #4bd391 100%);
    background: -o-linear-gradient(top, #4ad0f7 0%, #4bd391 100%);
    background: linear-gradient(180deg, #4ad0f7 0%, #4bd391 100%);
    opacity: 1;
  }

  .bar {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 90px;
    height: 90px;
    margin: auto;
    overflow: hidden;
    text-align: center;
    border-radius: 100%;
    -webkit-animation: bar 0.18s linear infinite alternate;
    animation: bar 0.18s linear infinite alternate;
  }

  .bar span {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 90px;
    height: 20px;
    margin: auto;
    font-size: 18px;
    color: #ed145b;
  }

  .xz {
    width: 100%;
    height: 100%;
    background: url(../images/load_06.png) no-repeat center center;
    background-size: 90px 90px;
    border-radius: 100%;
    -webkit-animation: bar1 0.45s 1s linear infinite;
    animation: bar1 0.45s 1s linear infinite;
  }

  #about_page .log-text {
    padding-top: 0;
  }

  #about_page ul {
    padding-left: 0;
  }

  #about_page ul li {
    font-size: 14px;
    line-height: 34px;
    text-indent: 2em;
    list-style: none;
  }

  #about_page ul li span {
    flex: 1;
    padding: 5px 0;
  }

  #about_page ul li.esp {
    display: flex;
  }

  .clearfix:after {
    display: block;
    height: 0;
    clear: both;
    font-size: 0;
    content: ' ';
    visibility: hidden;
  }

  #continar-left div.key-w,
  #continar-left p.text-post {
    text-indent: 0;
  }

  #continar-left p.text-post a:hover {
    color: #06aaff;
    text-decoration: underline;
  }

  /* 相关文章推荐start */
  .cat-title {
    padding: 7px 0;
    margin: 15px 0;
    color: var(--color-gray);
    background: #f5f5f5;
    border-bottom: 1px solid #f1f1f1;
  }

  .cat-title span {
    margin-left: 10px;
    font-size: 14px;
  }

  .live {
    margin: 0 !important;
    overflow: hidden;
  }

  .live > li {
    position: relative;
    padding: 0 0 0 1.5em;
    margin: 0 0 0.7em 10px;
    list-style: none;
    -webkit-transition: 0.12s;
    transition: 0.12s;
  }

  .live > li::before {
    position: absolute;
    top: 0;
    left: 0;
    font-family: 'Arial';
    font-size: 2em;
    line-height: 0.75;
    color: #111;
    text-align: center;
    content: '\2022';
    opacity: 0.5;
    -webkit-transition: 0.5s;
    transition: 0.5s;
  }

  .live a {
    text-decoration: none;
  }

  .live a:hover {
    color: #009cee;
  }

  /* 相关文章推荐end */

  #continar-left p.l {
    position: absolute;
    bottom: 3px;
    left: 233px;
    height: 36px;
    margin: 0 0px 3px 10px;
    font-size: 14px;
    line-height: 36px;
  }

  #continar-left p.l i,
  #continar-left p.l span,
  #continar-left p.l > span a,
  #continar-left p.l .icon-shijian {
    font-size: 12px;
  }

  #continar-left p.l > span {
    margin: 0 5px;
  }

  #continar-left p.l > span.p_time {
    display: inline-block;
  }

  #continar-left p.l > span.i_time {
    display: none;
  }

  #continar-left p.l .iconfont {
    margin-right: 5px;
    font-size: 13px;
    color: var(--color-gray_light);
  }

  #continar-left p.l * {
    color: var(--color-gray_dark);
  }

  #continar-left div.key-w {
    margin-bottom: 20px;
    font-size: 12px;
    text-align: center;
  }

  #continar-left div.key-w .single_lable {
    display: inline-block;
  }

  #continar-left div.key-w .iconfont {
    font-size: 14px;
  }

  #continar-left div.key-w a {
    display: inline-block;
    padding: 0px 7px;
    margin-bottom: 2px;
    font-size: smaller;
    line-height: 22px;
    color: var(--color-white);
    opacity: 0.85;
  }

  #continar-left > h2 {
    color: var(--color-gray);
  }

  #continar-left p.l span:nth-child(3) a {
    padding-left: 0;
  }

  ul.bon-1 {
    margin-bottom: 20px;
  }

  ul.bon-1 li {
    line-height: 32px;
    text-indent: 50px;
  }

  ul.bon-1 li:nth-of-type(2) {
    display: block;
  }

  .search_result #continar-left {
    float: none;
    float: none;
    width: 1200px;
    padding: 15px;
    padding: 0;
    margin: 0 auto 50px;
    overflow: hidden;
    background: transparent;
    border: 1px solid #e6e6e6;
    border: 0;
    border-radius: 5px;
  }

  #about_page #continar-left,
  #leaving_message #continar-left,
  .single {
    float: none !important;
    width: auto !important;
    padding: 0 30px 10px;
    overflow: hidden;
    background: var(--color-white);
    border-radius: 4px;
    border-radius: 0;
  }

  #about_page > div:nth-of-type(1) {
    margin-bottom: 20px;
  }

  div.nav-s {
    width: 820px;
    height: 40px;
    overflow: hidden;
    font-size: 14px;
    line-height: 40px;
    color: var(--color-gray);
    border-radius: 5px;
  }

  div.nav-s a {
    display: inline-block;
    margin-right: 40px;
    font-size: 14px;
    color: var(--color-dark);
  }

  div.nav-s a:nth-child(1) {
    position: relative;
    padding: 0 25px 0 35px;
    color: var(--color-white);
    background: var(--color-primary);
    background: var(--color-theme);
    -webkit-border-radius: 4px 0 0 4px;
    -moz-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
  }

  div.nav-s font {
    font-size: 14px;
    color: var(--color-gray);
  }

  div.nav-s a:nth-child(1):after {
    position: absolute;
    top: 0;
    right: -40px;
    border-top: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid var(--color-primary);
    border-left: 20px solid var(--color-theme);
    content: '';
  }

  div.nav-s a:nth-child(2) {
    position: relative;
    padding: 0 25px 0 15px;
    background: #f1f1f1;
  }

  div.nav-s a:nth-child(2):before,
  div.nav-s a:nth-child(3):before,
  div.nav-s a:nth-child(4):before {
    position: absolute;
    top: 0;
    left: -40px;
    border-top: 20px solid #f1f1f1;
    border-right: 20px solid #f1f1f1;
    border-bottom: 20px solid #f1f1f1;
    border-left: 20px solid transparent;
    content: '';
  }

  div.nav-s span {
    position: relative;
    display: inline-block;
    padding: 0 79px 0 15px;
    font-size: 14px;
    color: var(--color-dark);
    background: #f1f1f1;
    -webkit-border-radius: 0 4px 4px 0;
    -moz-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
  }

  div.nav-s span:before {
    position: absolute;
    top: 0;
    left: -36px;
    border-top: 20px solid #f1f1f1;
    border-right: 20px solid #f1f1f1;
    border-bottom: 20px solid #f1f1f1;
    border-left: 20px solid transparent;
    content: '';
  }

  div.nav-s a:nth-child(2):after {
    position: absolute;
    top: 0;
    right: -40px;
    border-top: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #f1f1f1;
    content: '';
  }

  div.nav-s a:nth-child(3):before {
    position: absolute;
    top: 0;
    left: -36px;
    border-top: 20px solid #f1f1f1;
    border-right: 20px solid #f1f1f1;
    border-bottom: 20px solid #f1f1f1;
    border-left: 20px solid transparent;
    content: '';
  }

  div.nav-s a:nth-child(3) {
    position: relative;
    padding: 0 25px 0 15px;
    background: #f1f1f1;
  }

  div.nav-s a:nth-child(3):after {
    position: absolute;
    top: 0;
    right: -40px;
    border-top: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #f1f1f1;
    content: '';
  }

  div.nav-s a {
    margin-right: 40px;
  }

  h1.title {
    margin-top: 20px;
    font-size: 24px;
    font-weight: 500;
    line-height: 40px;
    color: #555;
    text-align: center;
  }

  .article-items {
    padding: 15px 0 20px 0;
    text-align: center;
    border-bottom: 1px solid var(--color-gray_shallow);
  }

  .article-items > span {
    margin: 0 6px;
    color: var(--color-gray);
  }

  .article-items > span i {
    color: var(--color-gray);
  }

  .article-items > span a {
    font-size: 12px;
    color: var(--color-gray);
  }

  .article-items span.recommend .iconfont {
    margin: 0;
    color: var(--color-white);
    vertical-align: middle;
  }

  .article-items span.recommend a {
    padding: 2px 8px;
    color: var(--color-white);
    background: var(--color-primary);
    background: var(--color-theme);
    border-radius: 50px;
  }

  #continar-left .log-text {
    padding-top: 8px;
  }

  #continar-left .log-text a {
    color: var(--color-primary);
    color: var(--color-theme);
  }

  #continar-left .log-text a:hover {
    text-decoration: underline;
  }

  .log-text ul,
  .log-text ol {
    padding-left: 30px;
  }

  .log-text li {
    margin: 10px 0;
    line-height: 2;
    text-align: left;
    list-style-type: disc;
  }

  .log-text li + p,
  .log-text li + p + p,
  .log-text li + p + p + p,
  .log-text li + p + p + p + p {
    margin: -10px auto 10px;
  }

  .codecolorer,
  .codecolorer *,
  .codecolorer-container,
  .codecolorer-container * {
    font: 14px/1.8 'sf-pro-text_regular', 'Montserrat', 'Microsoft Yahei' !important;
  }

  .codecolorer-container table td.line-numbers div {
    color: #839496;
  }

  .solarized-dark .codecolorer .co0,
  .solarized-dark .codecolorer .co1,
  .solarized-dark .codecolorer .co2,
  .solarized-dark .codecolorer .co3,
  .solarized-dark .codecolorer .co4,
  .solarized-dark .codecolorer .coMULTI {
    color: #5c6370;
  }

  #continar-left .log-text p {
    margin: 10px auto;
    line-height: 30px;
    color: var(--color-gray);
    text-indent: 2em;
  }

  .log-text .beCareful {
    padding: 2px 4px;
    margin: 0;
    border-radius: 3px;
  }

  .log-text h1 {
    margin-bottom: 10px;
  }

  .log-text img {
    display: block;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
    cursor: pointer;
    opacity: 1;
  }

  #continar-left .post-motto {
    padding: 0.75rem 1.25rem;
    margin: 25px 0;
    font-size: 90%;
    font-weight: bold;
    line-height: 2;
    color: #856404;
    text-indent: 0;
    background-color: #fff3cd;
    border-color: #ffeeba;
    border-radius: 2px;
    transition: all 0.3s;
  }

  p.text-post {
    width: 100%;
    font-size: 14px;
    line-height: 30px;
    color: var(--color-gray);
  }

  .codecolorer .es0,
  .codecolorer .es1,
  .codecolorer .st0,
  .codecolorer .st_h {
    color: #269186;
  }

  .codecolorer .kw3,
  .codecolorer .kw4,
  .codecolorer .kw5,
  .codecolorer .re2 {
    color: #ff1493;
  }

  div.key-w a {
    padding: 2px 8px;
    margin: 0 5px;
    color: var(--color-white);
    background: #45b6f7;
    border-radius: 2px;
    -webkit-transition: all 0.1s;
    -o-transition: all 0.1s;
    transition: all 0.1s;
  }

  div.key-w a:hover {
    color: var(--color-white);
    opacity: 0.8;
  }

  div.jy {
    padding: 20px;
    margin: 20px 0;
    background: #fafafa;
  }

  div.jy p {
    text-indent: 2em;
  }

  .wp-pagenavi {
    position: relative;
    display: block;
    width: 100%;
    height: 36px;
    padding: 30px 0 70px;
    margin-top: -10px;
    overflow: hidden;
    line-height: 36px;
    text-align: center;
    background: var(--color-white);
    box-sizing: border-box;
  }

  .wp-pagenavi:after {
    position: absolute;
    top: 0;
    left: 15px;
    display: block;
    width: 820px;
    border-top: 1px solid #f2f2f2;
    content: '';
  }

  .wp-pagenavi a {
    padding: 8px 12px;
    margin: 0 5px;
    font-size: 14px;
    color: var(--color-gray);
    text-decoration: none;
    background-color: #f6f6f6;
    border: 1px solid #f3f3f3;
    border-radius: 4px;
  }

  span.extend {
    margin: 0 2px;
    color: var(--color-gray);
    color: var(--color-gray_dark);
    cursor: default;
    background-color: transparent;
    border-radius: 2px;
  }

  .pages {
    display: none;
  }

  .wp-pagenavi a.home_page {
    display: none;
  }

  .wp-pagenavi a:hover,
  .wp-pagenavi a.current:hover {
    color: var(--color-white);
    background: var(--color-primary);
    background: var(--color-theme);
  }

  .wp-pagenavi a.current {
    color: var(--color-white);
    text-decoration: none;
    background: var(--color-primary);
    background: var(--color-theme);
    border: 0;
  }

  .screen-reader-text {
    display: none !important;
  }

  .wpuf-attachment-list img {
    margin: 15px auto;
  }

  ul.wpuf-form li .wpuf-fields .wpuf-help {
    display: block;
    margin-top: 12px;
  }

  .os-headertop,
  #os-herder {
    display: none;
  }

  .notice {
    position: relative;
    display: none;
    float: left;
    width: 400px;
    height: 20px;
    margin-top: 3px;
    margin-left: 20px;
    overflow: hidden;
    line-height: 20px;
  }

  .notice ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  .notice ul li {
    width: 100%;
    height: 20px;
    overflow: hidden;
    font-size: 12px;
    line-height: 20px;
    color: var(--color-white);
    text-align: left;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .notice ul li i {
    display: inline-block;
    margin-right: 5px;
    color: var(--color-white);
  }

  .post-like a.done {
    cursor: not-allowed;
  }

  .page-reward {
    display: none;
    min-height: 72px;
    padding: 40px 0;
    margin: 0px 7.6923% 30px;
    text-align: center;
    border-bottom: 1px solid #ddd;
  }

  .page-reward .page-reward-btn {
    position: relative;
    display: inline-block;
    width: 56px;
    height: 56px;
    font-size: 20px;
    line-height: 56px;
    color: var(--color-white);
    text-align: center;
    background: #f44336;
    border-radius: 50%;
    -webkit-transition: 0.4s ease-in-out;
    -o-transition: 0.4s ease-in-out;
    transition: 0.4s ease-in-out;
  }

  .page-reward .page-reward-btn .tooltip-item {
    display: block;
    width: 56px;
    height: 56px;
    font-size: 20px;
    color: var(--color-white);
  }

  .page-reward .page-reward-btn .tooltip-item a {
    display: inline-block;
    font-size: 22px;
    line-height: 56px;
    color: var(--color-white);
    text-align: center;
    cursor: pointer;
  }

  .page-reward .page-reward-btn .tooltip-item .s_show {
    display: none;
  }

  .page-reward .page-reward-btn .tooltip-item font {
    display: block;
    width: 56px;
    height: 56px;
    font-size: 20px;
    color: var(--color-white);
  }

  .page-reward-btn .tooltip-item a span {
    font-size: 22px;
    color: var(--color-white);
  }

  .reward-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }

  .log-text .reward-p {
    margin: 0 0 25px;
    font-size: 16px;
    color: var(--color-white);
    text-indent: 0;
    text-shadow: 1px 1px 1px #45b9e0;
  }

  .log-text .reward-p .icon {
    margin: 0 10px;
    color: #ddd;
  }

  .reward-type {
    display: block;
    margin: 20px 0 0;
    font-size: 16px;
    color: #4d4d4d;
  }

  .reward-img {
    width: 130px;
    height: 130px;
    border: 6px solid var(--color-white);
    border-radius: 3px;
  }

  .tooltip-left .tooltip {
    position: absolute;
    top: -10px;
    right: 10px;
    z-index: 999;
    width: 28px;
    height: 28px;
    cursor: pointer;
  }

  .tooltip-left .tooltip:hover a.share-outer {
    background: #24c1f6;
  }

  @-webkit-keyframes pulse {
    0% {
      -webkit-transform: scale3d(0.5, 0.5, 1);
    }

    to {
      -webkit-transform: scaleX(1);
    }
  }

  @keyframes pulse {
    0% {
      -webkit-transform: scale3d(0.5, 0.5, 1);
      transform: scale3d(0.5, 0.5, 1);
    }

    to {
      -webkit-transform: scaleX(1);
      transform: scaleX(1);
    }
  }

  .tooltip-top .tooltip {
    position: relative;
    z-index: 999;
    display: inline;
  }

  .tooltip-top .tooltip:after {
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 100%;
    height: 20px;
    pointer-events: none;
    content: '';
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
  }

  .tooltip-top .tooltip:hover:after {
    pointer-events: auto;
  }

  .tooltip-content {
    position: absolute;
    top: -330px;
    left: 9px;
    z-index: 9999;
    width: 370px;
    margin: 0 0 -10px -158px;
    font-size: 20px;
    -webkit-font-smoothing: antialiased;
    line-height: 1.4;
    color: #4d4d4d;
    text-align: center;
    pointer-events: none;
    cursor: default;
    background: 0 0;
    opacity: 0;
    -webkit-transition: opacity 0.3s 0.3s;
    -o-transition: opacity 0.3s 0.3s;
    transition: opacity 0.3s 0.3s;
  }

  .tooltip-content span {
    display: block;
  }

  .tooltip-content {
    opacity: 0;
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
  }

  .reward-box span {
    display: block;
  }

  .tooltip-text {
    overflow: hidden;
    border-bottom: 10px solid #4d4d4d;
    -webkit-transform: scaleX(0);
    -ms-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: -webkit-transform 0.3s 0.3s;
    -o-transition: transform 0.3s 0.3s;
    transition: -webkit-transform 0.3s 0.3s;
    transition: transform 0.3s 0.3s;
    transition: transform 0.3s 0.3s, -webkit-transform 0.3s 0.3s;
  }

  .tooltip-top .tooltip:hover .tooltip-text,
  .post-actions .action-rewards:hover .tooltip-text {
    -webkit-transform: scaleX(1);
    -ms-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
  }

  .tooltip-inner {
    padding: 40px;
    background: rgba(36, 193, 246, 0.9);
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    -webkit-transition: -webkit-transform 0.3s;
    -o-transition: transform 0.3s;
    transition: -webkit-transform 0.3s;
    transition: transform 0.3s;
    transition: transform 0.3s, -webkit-transform 0.3s;
  }

  .tooltip:hover .tooltip-inner,
  .post-actions .action-rewards:hover .tooltip-inner {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition-delay: 0.3s;
    -o-transition-delay: 0.3s;
    transition-delay: 0.3s;
  }

  .tooltip-content:after {
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -10px;
    pointer-events: none;
    border: solid transparent;
    border-color: transparent;
    border-top-color: #4d4d4d;
    border-width: 10px;
    content: '';
  }

  ul.post-categories li {
    display: none;
  }

  ul.post-categories li:first-child {
    display: block;
  }

  .post-actions .layui-layer-close {
    cursor: pointer;
    background-position: 1px -40px;
  }

  #continar-left #demo {
    display: block;
    width: 120px;
    height: 33px;
    padding: 0;
    margin: 30px auto 35px;
    font-size: 15px;
    line-height: 33px;
    color: var(--color-white);
    text-align: left;
    text-align: center;
    text-indent: 0;
    background: var(--color-primary);
    background: var(--color-theme);
    border-radius: 4px;
    text-align-last: center;
  }

  .log-text h2,
  .log-text h4,
  .h4 {
    padding: 6px 15px;
    margin: 10px -15px;
    font-size: 16px;
    color: #444;
    background: #fbfbfb;
    border-bottom: 1px solid #39c;
    border-left: 4px solid #39c;
  }

  .log-text h3,
  .log-text h5 {
    padding: 10px 0;
    font-size: 16px;
    border-bottom: 1px dashed var(--color-gray_light);
  }

  .log-text h4:nth-of-type(5n + 1),
  .log-text h2:nth-of-type(5n + 1) {
    border-bottom: 1px solid #b9d329;
    border-left: 4px solid #b9d329;
  }

  .log-text h4:nth-of-type(5n + 2),
  .log-text h2:nth-of-type(5n + 2) {
    border-bottom: 1px solid #ffae5b;
    border-left: 4px solid #ffae5b;
  }

  .log-text h4:nth-of-type(5n + 3),
  .log-text h2:nth-of-type(5n + 3) {
    border-bottom: 1px solid #c0ebf7;
    border-left: 4px solid #c0ebf7;
  }

  .log-text h4:nth-of-type(5n + 4),
  .log-text h2:nth-of-type(5n + 4) {
    border-bottom: 1px solid var(--color-primary);
    border-bottom: 1px solid var(--color-theme);
    border-left: 4px solid var(--color-primary);
    border-left: 4px solid var(--color-theme);
  }

  /* 在线交流start */
  .communication {
    position: fixed;
    top: 35%;
    right: -85px;
    z-index: 999999;
  }

  .communication .suspended {
    position: absolute;
    right: 85px;
    margin-top: 35%;
  }

  .communication ul {
    background: var(--color-white);
    border-radius: 4px 0 0 4px;
  }

  .communication ul li {
    padding: 5px 0 5px 5px;
    border-bottom: 1px solid var(--color-gray_shallow);
  }

  .communication ul li img {
    display: block;
    border: 0;
  }

  .communication ul li .service {
    padding-top: 10px;
    font-size: 14px;
    font-weight: 700;
  }

  .telephone {
    font-size: 12px;
    color: #f60;
  }

  .communication ul li.qq p,
  .communication ul li .wechat p {
    font-size: 13px;
    line-height: 22px;
    color: var(--color-dark);
  }

  .communication ul li.qq a {
    width: 100px;
    height: 29px;
    font-size: 13px;
    line-height: 29px;
    text-decoration: none;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    vertical-align: middle;
  }

  .communication ul li.wechat {
    padding-left: 0;
  }

  .communication ul li.wechat p {
    padding-left: 5px;
  }

  .communication ul li.wechat img {
    width: 85px;
    height: 85px;
  }

  /* 在线交流end */

  /* 文章加密内容start */

  .e-secret {
    text-align: center;
  }

  .e-secret label {
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 47px;
  }

  .e-secret input {
    display: inline-block;
    vertical-align: middle;
    outline: none;
    box-sizing: border-box;
  }

  .e-secret input.euc-y-i {
    display: inline-block;
    height: 32px;
    padding: 0 15px;
    font-size: inherit;
    line-height: 1;
    color: #606266;
    background-color: var(--color-white);
    background-color: transparent !important;
    background-image: none;
    border: 1px solid #dcdfe6;
    border-radius: 4px 0 0 4px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    -webkit-appearance: none;
  }

  .euc-y-s {
    display: inline-block;
    padding: 9px 15px;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: #606266;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    background: var(--color-white);
    border: none;
    border-color: #dcdfe6;
    border-radius: 0 4px 4px 0;
    outline: none;
    box-sizing: border-box;
    transition: 0.1s;
    -webkit-appearance: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .e-secret input.euc-y-s {
    color: var(--color-white);
    background-color: var(--color-theme);
    border-color: var(--color-theme);
  }

  #continar-left .log-text .e-secret p a,
  #continar-left .e-secret p a:hover i {
    color: var(--color-white);
  }

  /* 文章加密内容end */

  #site_statis,
  #site_statis .daily-list {
    margin-bottom: 0;
  }

  #site_statis ul li {
    float: left;
    width: 50%;
    font-size: 12px;
    line-height: 26px;
    border-bottom: 0;
  }

  #site_statis ul li:hover {
    margin-left: 0;
  }

  .codecolorer-container {
    margin: 10px 0;
  }

  .downcloud {
    border: 1px solid #16bac5;
  }

  .downcloud:hover {
    color: var(--color-white);
    background: #1399a2;
  }

  .downcloud,
  .downcloud:focus {
    background: #16bac5;
  }

  .log-text .downbtn {
    padding: 10px 26px;
    font-size: 15px;
    line-height: 3;
    color: var(--color-white);
    background: #16bac5;
  }

  .log-text .downbtn:hover {
    color: var(--color-white);
  }

  .log-text .downbtn i {
    color: var(--color-white);
  }

  #smartideo iframe {
    height: 500px;
  }

  .footer-banner__navi {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 14;
    width: 100%;
    height: 20px;
    background: linear-gradient(hsla(0, 0%, 100%, 0), hsla(0, 0%, 100%, 1));
  }

  /* banner动画start */

  .foolishOut {
    -webkit-animation: foolishOut 3s 1s;
    animation: foolishOut 3s 1s;
  }

  @-webkit-keyframes foolishOut {
    0% {
      opacity: 1;
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      -webkit-transform: scale(1, 1) rotate(360deg);
      transform: scale(1, 1) rotate(360deg);
    }

    20% {
      opacity: 1;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: scale(0.5, 0.5) rotate(0);
      transform: scale(0.5, 0.5) rotate(0);
    }

    40% {
      opacity: 1;
      -webkit-transform-origin: 100% 0;
      transform-origin: 100% 0;
      -webkit-transform: scale(0.5, 0.5) rotate(0);
      transform: scale(0.5, 0.5) rotate(0);
    }

    60% {
      opacity: 1;
      -webkit-transform-origin: 0;
      transform-origin: 0;
      -webkit-transform: scale(0.5, 0.5) rotate(0);
      transform: scale(0.5, 0.5) rotate(0);
    }

    80% {
      opacity: 1;
      -webkit-transform-origin: 0 100%;
      transform-origin: 0 100%;
      -webkit-transform: scale(0.5, 0.5) rotate(0);
      transform: scale(0.5, 0.5) rotate(0);
    }

    100% {
      opacity: 0.5;
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      -webkit-transform: scale(1, 1) rotate(360deg);
      transform: scale(1, 1) rotate(360deg);
    }
  }

  @keyframes foolishOut {
    0% {
      opacity: 1;
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      -webkit-transform: scale(1, 1) rotate(360deg);
      transform: scale(1, 1) rotate(360deg);
    }

    20% {
      opacity: 1;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
      -webkit-transform: scale(0.5, 0.5) rotate(0);
      transform: scale(0.5, 0.5) rotate(0);
    }

    40% {
      opacity: 1;
      -webkit-transform-origin: 100% 0;
      transform-origin: 100% 0;
      -webkit-transform: scale(0.5, 0.5) rotate(0);
      transform: scale(0.5, 0.5) rotate(0);
    }

    60% {
      opacity: 1;
      -webkit-transform-origin: 0;
      transform-origin: 0;
      -webkit-transform: scale(0.5, 0.5) rotate(0);
      transform: scale(0.5, 0.5) rotate(0);
    }

    80% {
      opacity: 1;
      -webkit-transform-origin: 0 100%;
      transform-origin: 0 100%;
      -webkit-transform: scale(0.5, 0.5) rotate(0);
      transform: scale(0.5, 0.5) rotate(0);
    }

    100% {
      opacity: 0.5;
      -webkit-transform-origin: 50% 50%;
      transform-origin: 50% 50%;
      -webkit-transform: scale(1, 1) rotate(360deg);
      transform: scale(1, 1) rotate(360deg);
    }
  }

  /* banner动画end */

  .contact h4,
  .contact h5 {
    position: relative;
    height: 30px;
    font-size: 14px;
    line-height: 30px;
    color: var(--color-white);
  }

  .contact {
    position: absolute;
    top: 56px;
    left: 20px;
    z-index: 3;
    display: none;
    width: 360px;
    text-align: center;
    opacity: 0;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
  }

  .contact h3 {
    position: relative;
    z-index: 3;
    height: 34px;
    font-size: 16px;
    line-height: 34px;
    color: #f3274c;
    background: var(--color-white);
  }

  .contact h4 {
    top: 4px;
    z-index: 2;
    background: #fba792;
  }

  .contact h5 {
    /* background:#fb5e7b; */
    z-index: 1;
    background: #fba792;
  }

  .contact a {
    position: relative;
    top: 24px;
    display: inline-block;
    width: 138px;
    height: 32px;
    font-size: 14px;
    line-height: 32px;
    color: var(--color-white);
    text-decoration: none;
    background: #f0b017;
    border-radius: 4px;
  }

  .contact a:hover {
    background: #f4264d;
  }

  /* 首页弹窗end */

  /* 用户中心start */

  .head_user_b {
    width: calc(100% + 60px);
    margin: 0 0 0 -30px;
    background: url('../images/about_page.jpg') no-repeat center center;
    background-size: 100% 100%;
  }

  .head_user {
    position: relative;
    width: 100%;
    margin: 0px auto 6px;
    overflow: hidden;
    border-bottom: 1px solid #ccc;
  }

  .head_user_a {
    height: 300px;
  }

  .head_avatar {
    padding: 27px 0 10px;
    text-align: center;
  }

  .head_avatar_a {
    position: relative;
    font-size: 25px;
    color: var(--color-white);
    text-align: center;
  }

  .head_avatar_a p {
    font-size: 25px;
    line-height: 30px;
    color: var(--color-white);
    text-align: center;
  }

  .head_avatar_a .vip_aa img {
    vertical-align: inherit;
  }

  span.verify_1 {
    position: absolute;
    bottom: 0;
    width: 20px;
    height: 20px;
    margin-bottom: -56px;
    margin-left: -33px;
    cursor: pointer;
    background-image: url(../images/icon_a.png);
    background-position: -50px -25px;
    border-radius: 100%;
  }

  .head_avatar img {
    width: 125px;
    height: 125px;
    border: 3px solid rgba(255, 255, 255, 0.53);
    border-radius: 100%;
  }

  .icon_male {
    background-position: -100px -50px;
  }

  .img-icon {
    display: inline-block;
  }

  .icon_male,
  .icon_female {
    width: 16px;
    height: 18px;
    margin: 0 5px;
    vertical-align: -2px;
    background-image: url('../images/icon_a.png');
  }

  .head_avatar_b p {
    font-size: 14px;
    line-height: 30px;
    color: var(--color-white);
    text-align: center;
  }

  .head_avatar_c {
    margin-top: 10px;
    text-align: center;
  }

  span.follow-btn.unfollowed {
    background: #fa7d3c;
    border: 1px solid #f77268;
  }

  span.follow-btn.unfollowed i {
    color: var(--color-white);
  }

  .head_avatar_c span {
    padding: 4px 12px;
    margin: 15px;
    font-size: 15px;
    color: var(--color-white);
    cursor: pointer;
    border-radius: 4px;
  }

  Inherited from div.head_avatar_c .head_avatar_c {
    margin: 25px;
    text-align: center;
  }

  .head_user_data {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    padding: 5px 10px 5px 12px;
    background: var(--color-white);
    border-radius: 0 10px 0px 0;
  }

  .head_user_data span {
    margin-right: 20px;
  }

  .lv {
    display: inline-block;
    width: 33px;
    height: 17px;
    vertical-align: sub;
    background: url(../images/lv.png) no-repeat;
  }

  .lv45 {
    background-position: -199px -335px;
  }

  /* 用户中心end */

  #mobil,
  .nav-s1,
  .jy {
    display: none;
  }

  .article-items i.iconfont {
    font-size: 16px;
    color: var(--color-gray);
    vertical-align: text-bottom;
  }

  .article-items i.icon-liuyan1 {
    vertical-align: middle;
  }

  pre {
    max-height: 35em;
    padding: 10px 12px;
    margin: 15px 0;
    overflow: auto;
    overflow: hidden;
    font-size: 12px;
    line-height: 18px;
    color: #657b83;
    -webkit-text-size-adjust: none;
    word-break: break-all;
    word-wrap: break-word;
    white-space: normal;
    background-color: #272822;
    border: 1px solid var(--color-gray_light);
    border-left-width: 4px;
  }

  code {
    padding: 2px 4px;
    overflow: hidden;
    font-size: 90%;
    color: #c7254e;
    word-break: break-all;
    word-wrap: break-word;
    white-space: normal;
    background-color: #f9f2f4;
    border-radius: 4px;
  }

  .smartideo {
    margin: 15px 0 20px;
  }

  /* PC详情页打赏start */

  .post-actions {
    margin: 20px 0;
    clear: both;
    text-align: center;
  }

  #continar-left .log-text .post-actions .iconfont,
  #continar-left .log-text .post-like a.done:hover span.count {
    color: var(--color-white);
  }

  .post-actions > a {
    color: var(--color-white) !important;
  }

  .post-actions .action-like a .iconfont {
    display: inline-block;
    margin-right: 3px;
    font-size: 12px;
  }

  #continar-left .log-text .post-actions a {
    color: var(--color-white);
    text-decoration: none;
  }

  #continar-left .log-text .post-actions a .iconfont {
    font-size: 12px;
  }

  #continar-left .log-text .post-actions a.favorite .iconfont {
    font-size: 14px;
  }

  .post-actions .reward {
    display: inline-block;
    padding: 6px 12px 8px;
    margin: 0 7px;
    font-size: 14px;
    font-size: 12px;
    color: var(--color-white);
    cursor: pointer;
    border-radius: 4px;
    opacity: 0.8;
    box-sizing: content-box;
    transition: opacity 0.5s;
  }

  .post-actions .reward {
    background-color: #ec6149;
  }

  .post-actions .reward .iconfont,
  .post-actions .reward a {
    font-size: 12px;
  }

  .post-actions .reward:hover {
    color: var(--color-white);
    opacity: 1;
  }

  .post-actions .reward:hover .tooltip-content {
    pointer-events: auto;
    opacity: 1;
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    transition-delay: 0s;
  }

  .post-actions .action-like {
    font-size: 12px;
    background: var(--color-primary);
    background: var(--color-theme);
  }

  #reward-popup {
    display: none;
    width: 100%;
    height: 100%;
    padding: 20px;
  }

  #reward-popup .title {
    height: 30px;
    padding: 10px 0 20px;
    font-size: 18px;
    font-weight: bold;
    line-height: 30px;
    color: var(--color-dark);
    text-align: center;
    box-sizing: content-box;
  }

  #reward-popup .reward_item {
    display: flex;
    height: calc(100% - 60px);
    flex-wrap: wrap;
    justify-content: center;
  }

  #reward-popup .reward_item p {
    margin: 0px 0 12px;
    font-size: 15px;
    color: var(--color-dark);
    text-align: center;
    text-indent: 0;
  }

  #reward-popup .reward_item img {
    display: block;
    max-width: 85%;
    margin: 0 auto;
    border: 5px solid var(--color-gray_shallow);
  }

  #reward-popup .reward_item > div {
    width: 50%;
  }
  .reward_model .layui-layer-ico {
    background-position: 1px -38px;
  }

  /* PC详情页打赏end */

  /* 面包屑导航start */

  .mod-crumbs {
    display: block;
  }

  .mod-breadcrumb {
    display: block;
    padding: 13px 0;
    font-size: 14px;
    color: var(--color-gray);
    background: var(--color-white);
    border-bottom: 1px solid var(--color-gray_shallow);
  }

  .mod-breadcrumb a {
    font-size: 14px;
    color: var(--color-gray);
  }

  .search_result .mod-breadcrumb {
    padding: 13px 15px;
    border-radius: 4px;
  }

  .mod-breadcrumb a:hover {
    text-decoration: underline;
  }

  .mod-breadcrumb i.iconfont {
    font-size: 16px;
    color: var(--color-gray);
    vertical-align: text-top;
  }

  .article-items span {
    font-size: 14px;
    color: var(--color-gray);
  }

  /* 面包屑导航end */

  /* 热门文章start */
  .hot_rticles ul {
    padding: 2px 0 0 3px;
  }

  .hot_rticles ul li {
    padding: 10px 0;
    margin-bottom: 0;
    margin-left: -3px;
    border-left: 3px solid transparent;
    box-sizing: content-box;
    transition: all 0.5s;
  }

  .hot_rticles ul li:hover {
    background-color: #fafff8;
    border-left-color: #81c53f;
  }

  .hot_rticles ul li:last-of-type {
    border-bottom: 0;
  }

  .hot_rticles ul li a:nth-of-type(1) {
    position: relative;
    float: left;
    width: 105px;
    height: 65px;
    margin-left: 12px;
    border-radius: 2px;
  }

  .hot_rticles ul li .hot_text {
    position: relative;
    float: right;
    width: 190px;
    height: 65px;
    margin-right: 15px;
  }

  /* .p1{ word-break:break-all; width:150px;}/*只对英文起作用，以字母作为换行依据 */

  /* .p2{ word-wrap:break-word; width:150px;}/*--只对英文起作用，以单词作为换行依据 */

  /* .p3{white-space:pre-wrap; width:150px;}/*只对中文起作用，强制换行 */

  /* .p4{white-space:nowrap; width:10px;}/*强制不换行，都起作用 */

  /* .p5{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; width:100px;}／/*不换行，超出部分隐藏且以省略号形式出现 */

  .hot_rticles ul li .hot_text .hot_title {
    display: -webkit-box;
    width: 100%;
    height: 42px;
    margin-left: 0;
    overflow: visible;
    overflow: hidden;
    line-height: 20px;
    text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: break-word;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .hot_rticles ul li .hot_text .hot_time {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    color: var(--color-gray_dark);
  }

  .hot_rticles ul li .hot_text .hot_time span {
    float: right;
    font-size: 12px;
    line-height: 20px;
    color: var(--color-gray_dark);
  }

  .hot_time i.icon-icon-eyes {
    position: static;
    display: inline-block;
    margin: 0 2px;
    font-size: 12px;
    color: #e0e0e0;
    transform: scale(0.9);
  }

  .hot_rticles ul li img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    transform: translate(-50%, -50%);
  }

  .hot_rticles .widget-title {
    margin-bottom: 0;
  }

  /* 热门文章end */

  /* 针对傻逼畅言广告屏蔽start */

  #feedAv,
  #pop_ad,
  #MZAD_POP_PLACEHOLDER {
    display: none !important;
    margin-top: -200px !important;
    transform: scale(0);
  }

  /* 针对傻逼畅言广告屏蔽end */

  /* 首页3d轩枫导航start */
  .mod-index__feature {
    width: 100%;
  }

  .mod-index__feature * {
    color: var(--color-white);
  }

  .mod-index__feature .img_list_6pic {
    left: 0;
    float: left;
    width: 100%;
    overflow: visible;
    transform: rotate(0deg);
  }

  .mod-index__feature .img_list_3pic {
    left: 710px;
  }

  .mod-index__feature .img_list_1pic {
    left: 1420px;
  }

  .mod-index__feature .img_list_6pic .img_box,
  .mod-index__feature .img_list_6pic .img_box img {
    width: 310px;
    height: 180px;
  }

  .mod-index__feature .img_box {
    position: relative;
    float: left;
    margin-right: 2px;
    overflow: hidden;
  }

  .mod-index__feature .img_box a:hover {
    text-decoration: none;
  }

  .mod-index__feature .img_bg,
  .mod-index__feature .img_txt {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 35px;
    overflow: hidden;
  }

  .mod-index__feature .img_box .light {
    position: absolute;
    top: 0;
    left: -100px;
    width: 180px;
    height: 180px;
    cursor: pointer;
    background-image: -webkit-linear-gradient(
      0deg,
      hsla(0, 0%, 100%, 0),
      hsla(0, 0%, 100%, 0.5),
      hsla(0, 0%, 100%, 0)
    );
    -o-transform: skewx(-25deg);
    -moz-transform: skewx(-25deg);
    -webkit-transform: skewx(-25deg);
    transform: skewx(-25deg);
  }

  .mod-index__feature .img_box:hover .light {
    left: 250px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }

  .mod-index__feature .img_bg {
    background: #000;
    opacity: 0.7;
    filter: alpha(opacity=70);
  }

  .mod-index__feature .img_txt p {
    padding: 0 17px;
    font-size: 12px;
    color: #b3b3b3;
  }

  .mod-index__feature .img_txt .img_title {
    padding-top: 8px;
    font-family: 'STHeiti', 'Microsoft Yahei', '微软雅黑', 'Arial', sans-serif;
    font-size: 12px;
    color: var(--color-white);
  }

  .mod-index__feature .img_title a,
  .mod-index__feature .img_title a:hover {
    color: var(--color-white);
  }

  .mod-index__feature .small_pic_wrap {
    position: relative;
    display: block;
    float: left;
    width: 110px;
    height: 85px;
    margin: 0 0 10px 12px;
    font-family: 'STHeiti', 'Microsoft Yahei', '微软雅黑', 'Arial', sans-serif;
    color: var(--color-white);
  }

  .mod-index__feature .small_pic_wrap_long {
    width: 160px;
  }

  .mod-index__feature .small_pic_wrap .carousel_small_str {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    width: 110px;
    height: 85px;
    cursor: pointer;
    background-image: url('../images/min_nav_bg.png');
    background-repeat: no-repeat;
  }

  .mod-index__feature .small_pic_wrap .carousel_small_pic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  .mod-index__feature .word_display {
    z-index: 1;
  }

  .mod-index__feature .word_display .carousel_small_pic {
    display: none;
  }

  .mod-index__feature .word_display .carousel_small_str {
    display: block;
  }

  .mod-index__feature .small_pic_wrap_long .carousel_small_str {
    width: 160px;
  }

  .mod-index__feature .small_pic_wrap:hover {
    color: var(--color-white);
    text-decoration: none;
  }

  .mod-index__feature .img_txt_title {
    width: 150px;
    margin: 5px 0 0 8px;
    font-size: 24px;
    line-height: 34px;
  }

  .mod-index__feature .img_p {
    width: 150px;
    margin-left: 8px;
    font-size: 14px;
    color: var(--color-white);
  }

  .mod-index__feature .small_pic_wrap .txt_bg01 {
    background-position: 0 0;
  }

  .mod-index__feature .small_pic_wrap .txt_bg02 {
    background-position: 0 -105px;
  }

  .mod-index__feature .small_pic_wrap .txt_bg03 {
    background-position: 0 -210px;
  }

  .mod-index__feature .small_pic_wrap .txt_bg04 {
    background-position: 0 -315px;
  }

  .mod-index__feature .small_pic_wrap .txt_bg05 {
    background-position: 0 -420px;
  }

  .mod-index__feature .small_pic_wrap .txt_bg06 {
    background-position: 0 -514px;
  }

  /* 大图 */
  .mod-index__feature .small_pic_wrap_long .txt_bg01 {
    background-position: 0 -210px;
  }

  /* .mod-index__feature .small_pic_wrap_long .txt_bg01 {
    background-position: 0 -315px;
  } */

  .mod-index__feature .img_list_6pic .carousel_pic_wrap .carousel_small_str,
  .mod-index__feature .img_list_6pic .word_display .carousel_small_pic,
  .mod-index__feature .img_list_6pic .word_display .carousel_small_str {
    display: block;
  }

  .mod-index__feature .img_list_6pic .carousel_pic_wrap {
    perspective: 10000px;
    transform-style: preserve-3d;
    transition: transform 0.5s;
  }

  .mod-index__feature .img_list_6pic .carousel_small_pic,
  .mod-index__feature .img_list_6pic .carousel_small_str {
    transition: all 0.5s;
  }

  .mod-index__feature .img_list_6pic .carousel_small_pic {
    transform: translateZ(40px);
  }

  .mod-index__feature .img_list_6pic .carousel_small_str {
    transform: rotateX(-90deg) translateZ(42px);
  }

  .mod-index__feature .img_list_6pic .word_display {
    transform: translateZ(0) rotateX(90deg);
  }

  .mod-index__feature .unsupport3d .img_list_6pic .carousel_pic_wrap .carousel_small_str,
  .mod-index__feature .unsupport3d .img_list_6pic .word_display .carousel_small_pic,
  .mod-index__feature .unsupport3d .img_list_6pic .word_display .carousel_small_str {
    display: none;
  }

  .mod-index__feature .unsupport3d .img_list_6pic .word_display .carousel_small_str {
    display: block;
  }

  .mod-index__feature .unsupport3d .img_list_6pic .carousel_pic_wrap {
    transform-style: flat;
    transition: transform 0s;
  }

  .mod-index__feature .unsupport3d .img_list_6pic .carousel_small_pic,
  .mod-index__feature .unsupport3d .img_list_6pic .carousel_small_str {
    transition: all 0s;
  }

  .mod-index__feature .unsupport3d .img_list_6pic .carousel_small_pic {
    display: block;
    transform: translateZ(0);
  }

  .mod-index__feature .unsupport3d .img_list_6pic .carousel_small_str {
    transform: rotateX(0deg) translateZ(0);
  }

  .mod-index__feature .unsupport3d .img_list_6pic .word_display {
    transform: translateZ(0) rotateX(0deg);
  }

  /* 首页3d轩枫导航end */

  /* 留言板寄语start */
  #continar-left .leaving_message h1 {
    padding: 20px 0 15px;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: normal;
    color: var(--color-gray);
    text-align: center;
    border-bottom: 1px solid #f0f2f7;
  }

  #continar-left .leaving_message p {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 30px;
    text-indent: 2em;
  }

  #continar-left .leaving_message p a {
    font-size: 14px;
    color: var(--color-primary);
    color: var(--color-theme);
  }

  /* 留言板寄语end */

  /* page单页start */
  .single_page {
    padding: 15px 30px;
    background: var(--color-white);
  }

  .single_page h1 {
    padding: 20px 0 15px;
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: normal;
    color: var(--color-gray);
    text-align: center;
    border-bottom: 1px solid #f0f2f7;
  }

  .single_page p,
  .single_page ul li {
    margin: 5px 0;
    font-size: 14px;
    line-height: 30px;
    text-indent: 2em;
  }

  .single_page p a {
    font-size: 14px;
    color: var(--color-primary);
    color: var(--color-theme);
  }

  /* page单页end */

  /* comments留言评论框 */
  .comment {
    padding: 10px 15px;
    margin: 15px 0;
    background: #f0f2f7;
  }

  #comments .comment_title {
    position: relative;
    padding: 15px 0 10px;
    font-size: 16px;
    color: var(--color-gray);
    border-bottom: 1px solid #f0f2f7;
  }

  #comments .comment_title:after {
    position: absolute;
    bottom: -1px;
    left: 0;
    display: block;
    width: 100px;
    height: 2px;
    background: var(--color-primary);
    background: var(--color-theme);
    content: '';
  }

  #comments .comment_title .iconfont {
    margin: 0 5px 0 10px;
  }

  #comments .respond .login_success {
    padding: 5px 0;
    text-align: center;
    background: #f0f2f7;
    border-bottom: 1px solid #f1f1f1;
  }

  #comments .respond .login_success a {
    color: var(--color-primary);
    color: var(--color-theme);
  }

  .commentlist {
    padding-left: 40px;
  }

  .not_message {
    margin-top: 20px;
    text-align: center;
  }

  .commentlist li + .not_message {
    display: none;
  }

  .commentlist .media {
    padding: 0 15px;

    /* background: #f0f2f7; */

    /* border-bottom: 1px solid var(--color-gray_shallow); */

    /* border-bottom: 1px dashed var(--color-gray_shallow); */
  }

  .commentlist .children .media {
    padding: 10px 15px 0;
  }

  .commentlist .children .comment {
    padding: 0;
    margin: 0;
  }

  .commentlist > .comment {
    padding: 18px 15px;
    margin: 15px 0;
    background: #f0f2f7;
  }

  .commentlist ol {
    padding-left: 40px;
    list-style: none;
  }

  .comment .media-left {
    display: table-cell;
    padding-right: 10px;
    vertical-align: top;

    /* transform: translateX(-23px); */
  }

  .comment .media-body {
    display: table-cell;
    vertical-align: top;
  }

  .commentlist .author_name,
  .commentlist .author_name a {
    font-size: 16px;
  }

  .system_box {
    display: inline-block;
    transform: translateY(-2px);
  }

  .comment .media-body .system {
    padding: 2px 4px;
    margin-left: 4px;
    font-size: 12px;
    font-weight: 300;
    color: var(--color-white);
    vertical-align: initial;
    background: linear-gradient(90deg, #5087ec, #d95040, #f2bd42);
    border-radius: 3px;
  }

  .comment .media-body .browser {
    padding: 2px 4px;
    font-size: 12px;
    font-weight: 300;
    color: var(--color-white);
    vertical-align: initial;
    background: linear-gradient(90deg, #fc5c7d, #6a82fb);
    border-radius: 3px;
  }

  .comment .media-body p {
    padding: 8px 0;
    font-size: 14px;
    line-height: 22px;
    color: #777;
  }

  .comment .media-body .wp-smiley {
    height: auto !important;
    max-height: 1.5em !important;
    vertical-align: sub;
  }

  .comment .comment-metadata {
    width: calc(100% - 50px);
    margin: 0 auto;
  }

  .comment .comment-metadata span {
    font-size: 12px;
    color: #bbb;
  }

  .comment .comment-metadata span.comment-btn-reply a:hover {
    font-size: 12px;
    color: #bf1520;
    text-decoration: underline;
  }

  .comment .comment-metadata span.comment-btn-reply a {
    font-size: 12px;
    color: #bbb;
  }

  .commentlist li.comment {
    position: relative;
  }

  #reply-title #cancel-comment-reply-link:hover {
    text-decoration: underline;
  }

  .warning-text {
    position: absolute;
    color: var(--color-gray_dark);
  }

  .warning-text a {
    color: var(--color-primary);
    color: var(--color-theme);
  }

  .warning-text .link-logout {
    color: var(--color-primary);
    color: var(--color-theme);
  }

  .link-logout {
    color: var(--color-gray_dark);
  }

  .comment-navigation {
    width: 100%;
    padding: 15px 0;
    margin: 0 auto;
    text-align: center;
  }

  .comment-navigation .page-numbers {
    display: inline-block;
    padding: 9px 16px;
    color: var(--color-gray_dark);
    background: #f1f1f1;
  }

  .comment-navigation .page-numbers:hover {
    color: var(--color-gray);
    background: #e8e8e8;
  }

  .commentform-info {
    float: left;
    width: calc(100% - 80px);
  }

  .commentform-info label {
    width: 32%;
    margin-right: 7px;
  }

  .commentform-info input {
    font-weight: normal;
    background: #f0f2f7;
    border: 0;
    border-radius: 4px;
    border-radius: 4px;
    outline: none;
    box-shadow: none;
  }

  .commentform-info input:focus:-moz-input-placeholder {
    color: var(--color-white);
  }

  .commentform-info input:focus::-moz-input-placeholder {
    color: var(--color-white);
  }

  .commentform-info input:focus::-webkit-input-placeholder {
    color: var(--color-white);
  }

  .commentform-info input:focus:-ms-input-placeholder {
    color: var(--color-white);
  }

  .commentBtn .btn:hover {
    opacity: 0.8;
  }

  input#submit {
    color: var(--color-white);
    cursor: pointer;
    border-radius: 4px;
  }

  #comments {
    font-size: 15px;
    line-height: 1;
    line-height: 1.8em;
  }

  .comments-title {
    position: relative;
    padding: 7px 0;
    margin-top: 10px;
    color: var(--color-gray);
    text-align: center;
    background: #f0f2f7;
    border-bottom: 1px solid #f1f1f1;
  }

  .comment-navigation {
    display: none;
    width: 100%;
    padding: 15px 0;
    margin: 0 auto;
    text-align: center;
  }

  #reply-title {
    position: relative;
    font-size: 14px;
    color: var(--color-gray_dark);
    border-bottom: 0;
  }

  #reply-title a {
    color: var(--color-gray_dark);
  }

  #reply-title small a {
    color: var(--color-primary);
    color: var(--color-theme);
  }

  textarea#comment {
    height: auto;
    padding: 10px;
    margin: 10px 0;
    line-height: 1.8;
    color: #777;
    background: #f0f2f7;
    border: 0;
    border-radius: 5px;
    outline: none;
    box-shadow: none;
  }

  .commentform-info {
    float: left;
  }

  label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
  }

  .commentform-info label {
    margin-bottom: 0;
  }

  .form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
  }

  .btn-group,
  .btn-group-vertical {
    position: relative;
    display: inline-block;
    vertical-align: middle;
  }

  .commentBtn .btn {
    padding: 8px 15px;
    font-size: 12px;
    color: var(--color-white);
    text-align: center;
    background: var(--color-primary);
    background: var(--color-theme);
    border: 0;
  }

  .commentBtn[role='group'] {
    float: right;
  }

  .btn-group > .btn:first-child {
    margin-left: 0;
  }

  .children a.action {
    margin-right: 5px;
    color: #9466ff;
    border-radius: 3px;
  }

  .comment .media-left img {
    width: 50px;
    height: 50px;
    margin-left: -55px;
    border-radius: 4px;
  }

  #commentform {
    position: relative;
    overflow: hidden;
  }

  #commentform .expression {
    position: absolute;
    bottom: 50px;
    left: 8px;
    color: var(--color-gray_dark);
    cursor: pointer;
  }

  #commentform .iconfont {
    padding-right: 3px;
    color: var(--color-gray_dark);
  }

  /* 评论框end */

  /* 侧边栏最新留言start */

  #primary-sidebar ul {
    padding: 0px 15px 0px 15px;
    list-style: none;
  }

  #primary-sidebar ul li {
    padding: 5px 0px 5px 11px;
    overflow: hidden;
    line-height: 15px;
  }

  #primary-sidebar ul:after,
  .widget ul:before {
    display: table;
    line-height: 0;
    content: '';
  }

  #primary-sidebar ul li a,
  #primary-sidebar ul li p {
    float: right;
    width: calc(100% - 40px);
    padding: 2px 5px 8px 0px;
    font-size: 14px;
    line-height: 18px;
    text-align: justify;
    border-bottom: 1px solid var(--color-gray_shallow);
    text-align-last: left;
  }

  #primary-sidebar ul li a {
    padding-top: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #primary-sidebar ul li a:hover {
    color: var(--color-theme);
  }

  #primary-sidebar ul li:last-of-type a {
    border-bottom: none;
  }

  #primary-sidebar ul li p {
    padding: 5px 0 0;
    font-size: 12px;
    color: var(--color-gray);
    border: 0;
  }

  #primary-sidebar ul:after {
    clear: both;
  }

  #primary-sidebar ul li img:not(.wp-smiley) {
    float: left;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    margin-left: -10px;
    vertical-align: middle;
    border-radius: 4px;
  }

  #primary-sidebar ul li img.wp-smiley {
    vertical-align: sub;
  }

  #primary-sidebar ul li img + span {
    font-size: 12px;
    color: var(--color-gray_dark);
  }

  .text-muted {
    color: #777;
  }

  #primary-sidebar a.avatar:hover {
    background-color: #fbfbfb;
    border-bottom-color: #ddd;
  }

  .comment_vip a {
    display: inline-block;
    width: 16px;
    height: 14px;
    background-image: url(../images/vip.png);
    background-position: -147px -70px;
  }

  .comment_vip a.vp {
    background-position-y: -220px;
  }

  .comment_vip a.vip2 {
    background-position-y: -95px;
  }

  .comment_vip a.vip3 {
    background-position-y: -120px;
  }

  .comment_vip a.vip4 {
    background-position-y: -145px;
  }

  .comment_vip a.vip5 {
    background-position-y: -170px;
  }

  .comment_vip a.vip6 {
    background-position-y: -195px;
  }

  .comment_vip a.vip7 {
    background-position-y: -220px;
  }

  /* 侧边栏最新留言end */

  /* ajax loading动画start */

  @keyframes k-loadingO {
    0%,
    100% {
      transform: translate(0);
    }

    25% {
      transform: translate(160%);
    }

    50% {
      transform: translate(160%, 160%);
    }

    75% {
      transform: translate(0, 160%);
    }
  }

  #loading {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10000;
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
  }

  .k-ball-holder {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 45px;
    height: 45px;
    margin: auto;
  }

  .k-ball7a {
    position: absolute;
    width: 16px;
    height: 16px;
    margin: 0;
    background: #19a68c;
    border: 0;
    border-radius: 50%;
    animation: k-loadingO 2s ease infinite;
    animation-delay: -1.5s;
  }

  .k-ball7b {
    position: absolute;
    width: 16px;
    height: 16px;
    margin: 0;
    background: #f63d3a;
    border: 0;
    border-radius: 50%;
    animation: k-loadingO 2s ease infinite;
    animation-delay: -1s;
  }

  .k-ball7c {
    position: absolute;
    width: 16px;
    height: 16px;
    margin: 0;
    background: #fda543;
    border: 0;
    border-radius: 50%;
    animation: k-loadingO 2s ease infinite;
    animation-delay: -0.5s;
  }

  .k-ball7d {
    position: absolute;
    width: 16px;
    height: 16px;
    margin: 0;
    background: #193b48;
    border: 0;
    border-radius: 50%;
    animation: k-loadingO 2s ease infinite;
  }

  /* ajax loading动画end */

  /* 随机背景颜色start */
  #continar-right .color-1 {
    background: #f3a683;
  }

  #continar-right .color-2 {
    background: #778beb;
  }

  #continar-right .color-3 {
    background: #e77f67;
  }

  #continar-right .color-4 {
    background: #f5cd79;
  }

  #continar-right .color-5 {
    background: #0fb9b1;
  }

  #continar-right .color-6 {
    background: #f8a5c2;
  }

  #continar-right .color-7 {
    background: #596275;
  }

  #continar-right .color-8 {
    background: #20bf6b;
  }

  /* 随机背景颜色end */

  /* 底部悬浮窗start */
  .login_alert {
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 15;
    width: 100%;
  }

  .login_alert_close {
    position: absolute;
    top: -12px;
    right: 0;
    z-index: 1;
    width: 24px;
    height: 24px;
    padding: 5px;
    line-height: 24px;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 100%;
  }

  .login_alert_close .iconfont {
    display: block;
    margin: -1px 0 0 -1px;
    color: var(--color-white);
    text-align: center;
  }

  .login_alert_box {
    width: 100%;
    height: 70px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.6);
  }

  .login_alert_box div {
    font-size: 22px;
    line-height: 70px;
    color: var(--color-white);
    cursor: default;
  }

  .login_alert_box div a {
    display: inline-block;
    padding: 5px 15px;
    font-size: 18px;
    line-height: 26px;
    text-decoration: none;
    border-radius: 4px;
  }

  .login_alert_box div a:nth-of-type(1) {
    margin-left: 5px;
    color: var(--color-white);
    background: var(--color-primary);
    background: var(--color-theme);
  }

  .login_alert_box div span {
    font-size: 18px;
    color: var(--color-white);
  }

  .login_alert_box .register {
    color: var(--color-dark);
    background-color: var(--color-gray_dark);
  }

  /* 底部悬浮窗end */

  /* 针对IE9做兼容处理 */
  .nav ul li a span:nth-of-type(2),
  .mod-index__feature .img_list_6pic .word_display .carousel_small_pic,
  .footer:after {
    display: none\9;
  }

  /* 侧边栏标签、收藏 */
  #tagCollection {
    width: 200%;
    overflow: hidden;
    transition: transform 0.45s;
  }

  #tagCollection .items {
    display: grid;
    float: left;
    width: 50%;
    grid-template-columns: repeat(3, auto);
    grid-gap: 6px;
  }

  .page_switch {
    position: relative;
    z-index: 10;
    display: flex;
    margin: -2px 0 10px;
    justify-content: center;
  }

  .page_switch span {
    width: 35px;
    height: 3px;
    cursor: pointer;
    background: #eee;
    border: 1px solid #eee;
  }

  .page_switch span:first-of-type {
    border-right: 1px solid transparent;
  }

  .page_switch span.active {
    background: var(--color-theme);
    border: 1px solid var(--color-theme);
  }

  /* 视频播放器 */
  #my-video {
    position: relative;
    cursor: pointer;
  }
  #my-video .video_switch {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 40px;
    color: #fff;
    pointer-events: none;
    opacity: 0.7;
    transform: translate(-50%, -50%);
  }
  .dplayer-controller {
    opacity: 0;
  }
}
